<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>
Ссылки¶
<source>
на MDN