<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 (рус.)