<source> Элемент HTML для источника медиафайла или изображения

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

Попробуйте

<video controls width="250" height="200" muted>
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />
  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />
  Download the
  <a href="/shared-assets/videos/flower.webm">WEBM</a>
  or
  <a href="/shared-assets/videos/flower.mp4">MP4</a>
  video.
</video>

Атрибуты

Этот элемент поддерживает все глобальные атрибуты. Кроме того, с ним можно использовать следующие атрибуты:

type

Задаёт тип MIME изображения или другой тип медиа, при необходимости включая параметр codecs.

src

Задаёт URL медиаисточника. Обязателен, если родительским элементом <source> является <audio> или <video>. Не допускается, если родительский элемент — <picture>.

srcset

Задаёт разделённый запятыми список одного или нескольких URL изображений и их дескрипторов. Обязателен, если родительским элементом <source> является <picture>. Не допускается, если родительский элемент — <audio> или <video>.

Список состоит из строк, разделённых запятыми, которые указывают на набор изображений, доступных браузеру для использования. Каждая строка состоит из следующего:

• URL, указывающий расположение изображения.
• Необязательный дескриптор ширины — положительное целое число, непосредственно за которым следует "w", например 300w.
• Необязательный дескриптор плотности пикселей — положительное число с плавающей точкой, непосредственно за которым следует "x", например 2x.

Чтобы строка списка была допустимой, в ней должен быть указан либо дескриптор ширины, либо дескриптор плотности пикселей. Эти два дескриптора нельзя использовать вместе; на протяжении всего списка следует использовать только один из них. Значение каждого дескриптора в списке должно быть уникальным. Браузер выбирает наиболее подходящее изображение для отображения в данный момент на основе этих дескрипторов. Если дескрипторы не указаны, используется значение по умолчанию 1x. Если также присутствует атрибут sizes, каждая строка должна содержать дескриптор ширины. Если браузер не поддерживает srcset, для изображения по умолчанию будет использоваться src.

sizes

Задаёт список размеров источника, описывающих конечную ширину изображения после отрисовки. Допускается, если родительским элементом <source> является <picture>. Не допускается, если родительский элемент — <audio> или <video>.

Список состоит из размеров источника, разделённых запятыми. Каждый размер источника представляет собой пару из медиавыражения и длины. Перед компоновкой страницы браузер использует эту информацию, чтобы определить, какое изображение, заданное в srcset, отображать. Обратите внимание: sizes применяется только в том случае, если с srcset указаны дескрипторы ширины, а не дескрипторы плотности пикселей (то есть следует использовать 200w вместо 2x).

media

Задаёт медиавыражение для целевого типа медиа ресурса.

height

Задаёт внутреннюю высоту изображения в пикселях. Допускается, если родительским элементом <source> является <picture>. Не допускается, если родительский элемент — <audio> или <video>.

Значение высоты должно быть целым числом без единиц измерения.

width

Задаёт внутреннюю ширину изображения в пикселях. Допускается, если родительским элементом <source> является <picture>. Не допускается, если родительский элемент — <audio> или <video>.

Значение ширины должно быть целым числом без единиц измерения.

Примечания по использованию

Элемент <source> — это пустой элемент, то есть у него не только нет содержимого, но и отсутствует закрывающий тег. Иными словами, в HTML вы никогда не используете </source>.

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

• Если атрибут type не указан, браузер получает тип медиа с сервера и определяет, можно ли его отобразить. Если медиафайл нельзя отобразить, браузер проверяет следующий элемент <source> в списке.
• Если атрибут type указан, браузер сразу сравнивает его с типами медиа, которые он может отображать. Если тип не поддерживается, браузер пропускает запрос к серверу и сразу проверяет следующий элемент <source>.

Если ни один из элементов <source> не предоставляет подходящий источник:

• В случае элемента <picture> браузер использует изображение, заданное во вложенном элементе <img> элемента <picture>.
• В случае элемента <audio> или <video> браузер отображает содержимое, расположенное между открывающим и закрывающим тегами элемента.

Сведения о форматах изображений, поддерживаемых веб-браузерами, и рекомендации по выбору подходящих форматов см. в нашем руководстве по типам и форматам файлов изображений. Подробнее о типах медиа для видео и аудио, которые можно использовать, см. в руководстве по типам и форматам медиа.

Примеры

Использование атрибута type с <video>

В этом примере показано, как предложить видео в разных форматах: WebM для браузеров, которые его поддерживают, Ogg — для поддерживающих Ogg, и QuickTime — для поддерживающих QuickTime. Если браузер не поддерживает элемент <audio> или <video>, вместо него отображается уведомление. Если браузер поддерживает элемент, но не поддерживает ни один из указанных форматов, для элемента <audio> или <video> возникает событие error, а стандартные элементы управления медиа (если они включены) указывают на ошибку. Подробнее о том, какие форматы медиафайлов использовать и какие браузеры их поддерживают, см. в нашем руководстве по типам и форматам медиа.

<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML video.
</video>

Использование атрибута media с <video>

В этом примере показано, как предложить альтернативный исходный файл для областей просмотра шире определённого значения. Когда среда просмотра пользователя соответствует заданному условию media, выбирается соответствующий элемент <source>. Затем запрашивается и отображается содержимое его атрибута src. Если условие media не выполняется, браузер переходит к следующему элементу <source> в списке. У второго варианта <source> в приведённом ниже коде нет условия media, поэтому он будет выбран во всех остальных контекстах просмотра.

<video controls>
  <source src="foo-large.webm" media="(width >= 800px)" />
  <source src="foo.webm" />
  I'm sorry; your browser doesn't support HTML video.
</video>

Дополнительные примеры можно найти в статье Видео и аудио в HTML в разделе «Обучение».

Использование атрибута media с <picture>

В этом примере два элемента <source> включены в <picture> и предоставляют версии изображения, которые можно использовать, когда доступное пространство превышает определённую ширину. Если доступная ширина меньше наименьшего из этих значений, браузер использует изображение, заданное в элементе <img>.

<picture>
  <source srcset="mdn-logo-wide.png" media="(width >= 800px)" />
  <source srcset="mdn-logo-medium.png" media="(width >= 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
</picture>

При использовании элемента <picture> всегда необходимо включать элемент <img> с резервным изображением. Для обеспечения доступности также не забудьте добавить атрибут alt, если только изображение не является исключительно декоративным и не относится к содержимому.

Использование атрибутов height и width с <picture>

В этом примере три элемента <source> с атрибутами height и width включены в элемент <picture>. Медиавыражение позволяет браузеру выбрать изображение для отображения с атрибутами height и width на основе размера области просмотра.

<picture>
  <source
    srcset="landscape.png"
    media="(width >= 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(width >= 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(width >= 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image used when the browser does not support the sources"
    width="500"
    height="400" />
</picture>

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Элемент <audio>
• Элемент <picture>
• Элемент <video>
• Руководство по типам и форматам файлов изображений
• Руководство по типам и форматам медиа
• Производительность веб-сайтов