Тег <source> — один из элементов HTML5. Он используется для определения нескольких медиа-ресурсов в разных форматах: видео, аудио или изображения. Это необходимо для достижения наилучшей кроссбраузерной совместимости. Из возможных вариантов браузер может выбрать формат, который он поддерживает, и без труда воспроизводить аудио и видео файлы.
Тег <source> - синтаксис и код
Тег <source> пуст, а это значит, что закрывающий тег не требуется. Но в XHTML тег (<source>) должен быть закрыт (<source/>).
В этом примере аудиоплеер с двумя исходными файлами. Браузер выберет первый поддерживаемый им <source>:
<audio controls>
<source src="/htm/audio/bird.ogg" type="audio/ogg">
<source src="/htm/audio/bird.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио элементы.
</audio>
Элемент audio
Нажмите кнопку воспроизведения, чтобы воспроизвести звук:
Определение и использование
Тег <source> используется для указания нескольких медиа-ресурсов для медиа-элементов, таких как <video>, <audio> и <picture>;
Тег <source> позволяет указать альтернативные файлы видео/аудио/изображений, которые браузер может выбирать в зависимости от поддержки браузера или ширины области просмотра;
Браузер выберет первый поддерживаемый им <source>.
✪ Рекомендация: если тег <source> включен в теги <audio> или <video>, его следует размещать перед тегом <track> и после медиафайлов. Его следует размещать перед <img>, если он находится внутри тега <picture>.
★ Примечание: элемент <source> можно использовать несколько раз в одном документе для обозначения альтернативных аудио/видео файлов и изображений различных форматов.
Поддержка <source> браузерами
Поддерживает
Поддерживает
Поддерживает
Поддерживает
Поддерживает
Атрибуты
Атрибут
Значение
Описание
media
media_query
Принимает любой допустимый медиа-запрос, который обычно определяется в CSS
sizes
Определяет размеры изображений для разных макетов страниц.
src
URL
Требуется, когда <source> используется в <audio> и <video>. Указывает URL-адрес медиа-файла
srcset
URL
Требуется, когда <source> используется в <picture>. Указывает URL-адрес изображения для использования в различных ситуациях
