HTML тег source

HTML-тег <source> задаёт один из нескольких альтернативных медиаресурсов для элементов <picture>, <audio> или <video>. Это пустой (void) элемент: у него нет содержимого и закрывающего тега.

На этой странице объясняется, зачем использовать <source> вместо одного атрибута src, где он допустим и как браузер решает, какой источник загрузить.

Зачем использовать `<source>` вместо обычного `src`?

Одиночный атрибут src указывает ровно на один файл. Элемент <source> позволяет предложить браузеру список кандидатов, чтобы он мог выбрать наилучший поддерживаемый вариант. Браузер читает дочерние элементы <source> по порядку и использует первый, который он может воспроизвести или отобразить — остальные игнорируются.

Это решает две реальные проблемы:

Резервные форматы для <video> и <audio>. Ни один видео- или аудиоформат не поддерживается всеми браузерами. Перечислив несколько кодировок (например, WebM и MP4), каждый браузер воспроизведёт первый понятный ему формат.
Адаптивные и художественно направленные изображения для <picture>. С помощью атрибутов media и srcset можно подавать разные изображения — или одно и то же, но по-разному обрезанное — в зависимости от размера экрана или разрешения дисплея.

Элемент <source> входит в число элементов HTML5 и может использоваться несколько раз внутри одного родительского элемента для перечисления доступных альтернатив.

Опасно

Если тег <source> включён в теги <audio> или <video>, он должен располагаться перед тегом <track> и после медиафайлов. Он должен располагаться перед <img>, если находится внутри тега <picture>.

Синтаксис

Тег <source> является пустым, поэтому закрывающий тег не требуется. Однако в XHTML тег <source> должен быть закрыт (<source/>).

Пример использования `<source>` внутри элемента `<picture>`

Обратите внимание, что у <source> нет атрибута alt. Альтернативный текст всегда указывается на резервном элементе <img>, который также отображается в старых браузерах.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
      <source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3Docs logo" style="width:auto;" />
    </picture>
    <p>The browser loads the first <source> whose media query matches. If none match, it falls back to the <img> element.</p>
  </body>
</html>

Попробуйте сами »

Пример использования `<source>` внутри элемента `<video>`

Здесь браузер сначала пробует файл WebM; если он не поддерживает WebM, использует файл MP4. Атрибут type позволяет браузеру пропустить неподдерживаемый формат без его скачивания.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
    <p>Some information about the video.</p>
  </body>
</html>

Попробуйте сами »

Пример использования `<source>` внутри элемента `<audio>`

Та же логика резервных форматов применяется к аудио. Браузер воспроизводит первую поддерживаемую кодировку; текст после источников отображается только если <audio> вообще не поддерживается.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.ogg" type="audio/ogg" />
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
    <p>Some information about the audio.</p>
  </body>
</html>

Атрибуты

Атрибут	Значение	Описание
`media`	CSS медиазапрос, например `(min-width: 768px)`	Только для `<picture>`. Браузер использует этот источник, когда медиазапрос совпадает.
`sizes`	Один или несколько размеров, например `(max-width: 600px) 480px, 800px`	Только для `<picture>`. Описывает, какой ширины будет отображаться изображение, чтобы браузер мог выбрать подходящего кандидата из `srcset`.
`src`	URL	Адрес медиафайла. Используется внутри `<audio>` и `<video>`.
`srcset`	URL или список URL через запятую с дескрипторами ширины/плотности	Только для `<picture>`. Перечисляет кандидатов изображений для разных разрешений или размеров экрана.
`type`	MIME-тип, например `video/webm`, `video/mp4`, `audio/ogg`, `audio/mpeg`, `image/webp`	MIME-тип ресурса. Позволяет браузеру пропустить неподдерживаемые форматы.

Тег <source> также поддерживает Глобальные атрибуты и Атрибуты событий.

Практика

Когда браузер встречает несколько элементов source внутри элемента video, какой из них он использует?

Первый source, формат которого поддерживает браузер; остальные игнорируются.Последний source в списке, так как он переопределяет предыдущие.Все сразу, воспроизводимые по очереди.Source, выбранный случайным образом из списка.

Зачем использовать <source> вместо обычного src?