Тег <source> используется для определения нескольких файлов-ресурсов в тегах <video>, <audio>, <picture>.
С помощью тега <source> можно дать браузеру несколько вариантов содержимого на выбор. Браузер выберет самый подходящий из них (например, в зависимости от ширины экрана, поддержки кодека и т.д.).
Этот тег был введен в HTML5.
Синтаксис
<source атрибуты >В зависимости от тега, к которому относится <source>, используются разные атрибуты.
Примеры использования <source> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Несколько ресурсов с помощью source</title>
</head>
<body>
<!-- Вставка видео -->
<video width="1280" height="720" autoplay controls loop>
<source src="/video/my_video.mp4" type="video/mp4">
<source src="/video/my_video.ogg" type="video/ogg">
Воспроизведение видео-файла не поддерживается браузером
</video>
<!-- Вывод нескольких изображений в зависимости от ширины окна -->
<picture>
<source media="(min-width: 1000px)" srcset="image_1.jpg">
<source media="(min-width: 500px)" srcset="image_2.jpg">
<img src="image_3.jpg" alt="Images" style="width: auto; height: auto;">
</picture>
<!-- Вставка аудио -->
<audio autoplay controls>
<source src="/music/track.mp3" type="audio/mpeg">
<source src="/music/track.ogg" type="audio/ogg">
Воспроизведение аудио-файла не поддерживается браузером
</audio>
</body>
</html>Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| <source> | Да | 9+ | Да | Да | Да |
Атрибуты
| Атрибут | Значения | Описание |
|---|---|---|
| src | URL |
Указывает адрес медиа-файла. Обязателен при использовании внутри <video> и <audio>. |
| srcset | URL |
Указывает адрес медиа-файла. Обязателен при использовании внутри <picture>. |
| media | media_query |
Определяет условие, при котором будет использован данный ресурс. |
| sizes | media_query + length |
Устанавливает размеры изображения в зависимости от media-условия. Экспериментальный атрибут. |
| type | MIME-type |
Указывает MIME-тип ресурса. MIME-type для видео:
MIME-type для аудио:
|
