Пример
Аудиоплеер с двумя исходными файлами. Браузер выберет первый тег <source>, который он поддерживает:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио элемент.
</audio>
Попробуйте сами »
Другие примеры "Попробуйте сами" ниже.
Определение и использование
Тег <source> используется для указания нескольких медиаресурсов для медиа элементов, таких как
<video>, <audio>,
и <picture>.
Тег <source> позволяет указать альтернативные видео/аудио/изображения
файлы, из которых браузер может выбирать на основе своей поддержки или ширины области просмотра. Браузер выберет первый тег <source>,
который он поддерживает.
Поддержка браузерами
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| media | медиазапрос | Принимает любой допустимый медиазапрос, который обычно определяется в CSS |
| sizes | Определяет размеры изображений для разных макетов страницы | |
| src | URL | Обязателен, когда <source> используется в <audio> и <video>. Указывает URL медиафайла |
| srcset | URL | Обязателен, когда <source> используется в <picture>. Указывает URL изображения для использования в разных ситуациях |
| type | MIME-тип | Указывает MIME-тип ресурса |
Глобальные атрибуты
Тег <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">
Ваш браузер не поддерживает тег video.
</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="Цветы" style="width:auto;">
</picture>
Попробуйте сами »
Связанные страницы
Учебник HTML: HTML Видео
Учебник HTML: HTML Аудио
Справочник по HTML DOM: Объект Source
Настройки CSS по умолчанию
Нет.