1. Синтаксис
  2. Атрибуты
    1. media
    2. sizes

<source>

Тег <source> (от англ. source – источник) вставляет звуковой или видеофайл для элементов <audio> и <video>. Обобщённо такие файлы называются медийными. Также применяется для добавления изображений в контейнере <picture>

Когда располагается внутри <audio> или <video>, элемент <source> должен идти после медийных файлов, но до <track>. Внутри <picture> он должен идти перед <img>.

Синтаксис

<audio>
  <source src="<адрес>" />
</audio>

<video>
  <source src="<адрес>" />
</video>

<picture>
  <source srcset="..." />
</picture>

Закрывающий тег не обязателен.

Атрибуты

  • media - Определяет устройство, для которого будет воспроизводиться файл.
  • sizes - Задаёт размеры изображений для разных макетов страницы.
  • src - Адрес медиа-файла.
  • srcset - Изображения, которые используются в разных ситуациях (для экранов планшетов, для экранов ретина и др.).
  • type - MIME-тип медийного источника.

media

Определяет медиа-запрос, согласно которому будет выводиться изображение. Работает только внутри элемента <picture>.

Синтаксис

<picture>
  <source media="<медиа-запрос>"/>
  <picture></picture
></picture>

Значения

См. Медиа-запросы.

sizes

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

Атрибут sizes работает только, когда элемент <source> расположен внутри элемента <picture>.

Одно значение ширины. Здесь vw — это ширина в процентах от области просмотра.

sizes="100vw"

Медиа-запрос с одним значением ширины. В данном случае в качестве контрольной точки задано 40em.

sizes="(min-width: 40em) 100vw"

Список размеров, перечисленный через запятую. В значениях можно указывать медиа-запросы и функцию calc().

sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"

Синтаксис

<picture>
  <source
    sizes="[<размер исходника># ,]? <значение размера исходника>
      <медиа-запрос> <значение размера исходника>
      <размер>"
  />
</picture>
<значение размера="" исходника=""> не допускает проценты, используйте только единицы vw. **Значение по умолчанию** Нет. ### src Адрес аудио или видеофайла, который будет воспроизводиться на веб-странице. **Синтаксис** ```html ``` **Значения** В качестве значения принимается полный или относительный путь к файлу. **Значение по умолчанию** Нет. ### srcset Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможных изображений для отображения в браузере. Каждая строка может состоять их следующих частей: - адрес изображения; - дескриптор ширины, который представляет собой целое положительное число, за которым следует w (например: 600w). Дескриптор подсказывает браузеру, для какой контрольной точки использовать данное изображение; - дескриптор плотности пикселей, представляет собой положительное десятичное число, за которым сразу следует х. Каждая строка в списке должна содержать по крайней мере дескриптор ширины или плотности пикселей. Браузер выбирает наиболее подходящее изображение для отображения в данный момент времени. Атрибут `srcset` имеет эффект только тогда, когда элемент `` располагается непосредственно внутри элемента [``](/html/picture/). **Значение по умолчанию** Нет. ### type Задаёт MIME-тип источника, а также аудио и видеокодек — так называется алгоритм хранения воспроизводимых данных. **Синтаксис** ```html ``` **Значения** Вначале указывается MIME-тип, затем после точки с запятой пишется ключевое слово `codecs` и ему присваивается через запятую значение видео и аудиокодека. Если предполагается использовать только звук, видеокодек не пишется. **Значение по умолчанию** Нет. ## Спецификации - [WHATWG HTML Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element) ## Описание и примеры ```html <!DOCTYPE html> source ```