Тег <source>
Описание
Тег <source> используется для указания альтернативных медиа-ресурсов для элементов <picture>, <audio> и <video>. Это одиночный тег, позволяющий браузеру выбирать наиболее подходящий источник в зависимости от поддерживаемых форматов или условий отображения.
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>
<!-- Для видео с разными форматами -->
<video controls width="400">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Ваш браузер не поддерживает HTML5 видео
</video>
<!-- Для адаптивных изображений -->
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="Пример изображения">
</picture>
<!-- Для аудио с разными кодеками -->
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>
Ключевые особенности:
- Работает только внутри media-контейнеров (picture/audio/video)
- Браузер использует первый поддерживаемый source
- Не имеет закрывающего тега (одиночный элемент)
- Позволяет реализовать адаптивные медиа-ресурсы
- Поддерживается всеми современными браузерами
Рекомендации по использованию:
- Для видео сначала указывайте самый распространённый формат
- Всегда указывайте атрибут type для правильного определения кодека
- Для изображений используйте медиа-запросы в атрибуте media
- Предоставляйте fallback-контент (особенно для video/audio)
- Для экономии трафика используйте современные форматы (WebP, AVIF)
Тег <source> является ключевым элементом адаптивной загрузки медиа-контента, позволяя оптимизировать доставку ресурсов в зависимости от возможностей устройства и браузера.
Атрибуты
| src | URL медиаресурса |
| type | MIME-тип ресурса |
| srcset | Набор изображений для разных разрешений |
| sizes | Размеры изображений для разных макетов |
| media | Медиа-запрос для выбора ресурса |
| id | Уникальный идентификатор |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 9.0 | 8.0 | 10.5 | 4.0 | 3.1 |