Тег <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 Медиа-запрос для выбора ресурса
accesskey Горячая клавиша для активации
class CSS-классы для стилизации
id Уникальный идентификатор
style Инлайновые стили
title Всплывающая подсказка
hidden Скрывает элемент
lang Язык содержимого
translate Определяет возможность перевода

Поддержка браузерами
9.0 8.0 10.5 4.0 3.1