HTML <source> Тег
Пример
Аудио проигрыватель с двумя исходными файлами. Браузер должен выбрать, какой файл (если таковой имеется) он имеет поддержку:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Подробнее примеры ниже.
Определение и использование
Тег <source> используется для указания нескольких мультимедийных ресурсов для элементов мультимедиа, таких как <video>, <audio> и <picture>.
Тег <source> позволяет указать альтернативные файлы видео/аудио/изображения, которые может выбрать браузер, в зависимости от типа носителя, поддержки кодеков или мультимедийного запроса.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Различия между HTML 4,01 и HTML5
Тег <source> является новым в HTML5.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| src | URL | Требуется, когда <source> используется в <audio> и <video>. Указывает URL-адрес файла мультимедиа |
| srcset | URL | Требуется, когда <source> используется в <picture>. Указывает URL-адрес изображения для использования в различных ситуациях |
| media | media_query | Принимает любой допустимый запрос носителя, который обычно определяется в CSS |
| sizes | Определяет размеры изображения для различных макетов страниц | |
| type | MIME-type | Задает MIME-тип ресурса |
Глобальные атрибуты
Тег <source> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <source> также поддерживает Атрибуты событий в HTML.
Другие примеры
Пример
Элемент <source> с двумя исходными файлами и резервным изображением:
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Похожие страницы
Учебник по HTML: HTML5 Video
HTML Учебник: HTML5 Audio
HTML DOM Ссылки: Source Object
Параметры CSS по умолчанию
Нет.