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

Элемент <source> HTML определяет один или несколько медиа-ресурсов для элементов <picture>, <audio> и <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> — это пустой элемент, что означает, что он не только не содержит содержимого, но и не имеет закрывающего тега. То есть, вы никогда не используете "</source>" в вашем HTML.

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

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

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

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

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

Этот пример демонстрирует, как предоставить видео в разных форматах: WebM для браузеров, которые его поддерживают, Ogg для браузеров, которые поддерживают Ogg, и QuickTime для браузеров, которые поддерживают QuickTime. Если элемент <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, выбирается соответствующий элемент <source>. Затем запрашивается и отображается содержимое его атрибута src. Если условие media не соответствует, браузер переходит к следующему элементу <source> в списке. Второй вариант <source> в коде ниже не имеет условия media, поэтому он будет выбран для всех других контекстов просмотра.

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

Для получения дополнительных примеров, статья Видео- и аудио-контент в разделе "Учебники" — отличный ресурс.

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

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

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

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

<picture>
  <source
    srcset="landscape.png"
    media="(min-width: 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(min-width: 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(min-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> элемент
• Руководство по типам и форматам файлов изображений
• Руководство по типам и форматам медиафайлов
• Производительность веб-приложений