HTML - тег <source>
Пример
Аудиоплеер с двумя исходными файлами. Браузер выберет первый поддерживаемый им <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>
, что он поддерживает.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую элемент.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Атрибуты
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
Глобальные атрибуты
Тег <source>также поддерживает глобальные атрибуты в HTML .
Атрибуты события
Тег <source>также поддерживает атрибуты событий в HTML .
Дополнительные примеры
Пример
Используйте <source> внутри <video> для воспроизведения видео:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Пример
Используйте <source> внутри <picture> для определения различных изображений в зависимости от ширины области просмотра:
<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: HTML-видео
Учебник по HTML: HTML-аудио
Справочник по HTML DOM: Исходный объект
Настройки CSS по умолчанию
Никто.