<source> HTML

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

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

Синтаксис

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

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

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

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

WAI ARIA

Нет значения role по-умолчанию.

Атрибуты

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

media

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

Синтаксис

<picture>
  <source media="<медиа-запрос>">
<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>