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

<source>

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

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

Демо

Изображения и мультимедиа

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<audio>
    <source src="<адрес>" />
</audio>

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

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

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

Атрибуты

media

Определяет устройство, для которого будет воспроизводиться файл.

sizes

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

src

Адрес медиа-файла.

srcset

Изображения, которые используются в разных ситуациях (для экранов планшетов, для экранов ретина и др.).

type

MIME-тип медийного источника.

media

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

Синтаксис

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

Значения

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

sizes

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

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

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

1
sizes="100vw"

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

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

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

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

Синтаксис

1
2
3
4
5
6
7
<picture>
    <source
        sizes="[<размер исходника># ,]? <значение размера исходника>
      <медиа-запрос> <значение размера исходника>
      <размер>"
    />
</picture>

<значение размера исходника> не допускает проценты, используйте только единицы vw.

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

Нет.

src

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

Синтаксис

1
2
3
4
5
6
<audio>
    <source src="<адрес>" />
</audio>
<video>
    <source src="<адрес>" />
</video>

Значения

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

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

Нет.

srcset

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

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

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

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

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

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

Нет.

type

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<audio>
    <source
        src="<адрес>"
        type='<MIME-тип>; codecs="<кодек>"'
    />
</audio>
<video>
    <source
        src="<адрес>"
        type='<MIME-тип>; codecs="<кодек>"'
    />
</video>

Значения

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

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

Нет.

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>

Ссылки

Комментарии