Перейти к содержанию

<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

Адрес аудио или видеофайла, который будет воспроизводиться на веб-странице.

Синтаксис

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

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

srcset

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

  • адрес изображения;
  • дескриптор ширины, который представляет собой целое положительное число, за которым следует w (например: 600w). Дескриптор подсказывает браузеру, для какой контрольной точки использовать данное изображение;
  • дескриптор плотности пикселей, представляет собой положительное десятичное число, за которым сразу следует х.

Каждая строка в списке должна содержать по крайней мере дескриптор ширины или плотности пикселей.

Браузер выбирает наиболее подходящее изображение для отображения в данный момент времени.

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

Значение по умолчанию

Нет.

type

Задаёт MIME-тип источника, а также аудио и видеокодек — так называется алгоритм хранения воспроизводимых данных.

Синтаксис

<audio>
  <source
    src="<адрес>"
    type='<MIME-тип>; codecs="<кодек>"'
  />
</audio>
<video>
  <source
    src="<адрес>"
    type='<MIME-тип>; codecs="<кодек>"'
  />
</video>

Значения

Вначале указывается MIME-тип, затем после точки с запятой пишется ключевое слово codecs и ему присваивается через запятую значение видео и аудиокодека. Если предполагается использовать только звук, видеокодек не пишется.

Значение по умолчанию

Нет.

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

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>source</title>
  </head>
  <body>
    <video width="400" height="300" controls="controls">
      <source
        src="video/duel.ogv"
        type='video/ogg; codecs="theora, vorbis"'
      />
      <source
        src="video/duel.mp4"
        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
      />
      <source
        src="video/duel.webm"
        type='video/webm; codecs="vp8, vorbis"'
      />
      Элемент video не поддерживается вашим браузером.
      <a href="video/duel.mp4">Скачайте видео</a>.
    </video>
  </body>
</html>

Ссылки