<video>¶

Тег <video> (от англ. video — видео) добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.

Путь к файлу задаётся через атрибут src или вложенный элемент <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен.

Для универсального воспроизведения в браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно.

Демо¶

Синтаксис¶

1
2
3

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

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

Атрибуты¶

autoplay

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

buffered

Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект TimeRanges.

controls

Добавляет панель управления к видеоролику.

crossorigin

Этот атрибут указывает, следует ли использовать CORS для извлечения связанного изображения.

height

Задаёт высоту области для воспроизведения видеоролика.

loop

Повторяет воспроизведение видео с начала после его завершения.

muted

Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. Если атрибут указан, то аудио дорожка воспроизводиться не будет. Значение атрибута по умолчанию - "ложь", и это означает, что звук будет воспроизводиться, когда видео воспроизводится.

played

Атрибут TimeRanges, указывающий все диапазоны воспроизводимого видео.

poster

Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.

preload

Используется для загрузки видео вместе с загрузкой веб-страницы.

src

Указывает путь к воспроизводимому видеоролику.

width

Задаёт ширину области для воспроизведения видеоролика.

autoplay¶

При наличии этого атрибута видео начинает воспроизводиться автоматически после загрузки страницы. Атрибут autoplay отменяет действие preload.

Синтаксис

1

<video autoplay="autoplay"></video>

Значения

В качестве значения указывается autoplay, также допустимо вообще не указывать никакое значение.

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

По умолчанию этот атрибут выключен.

controls¶

Добавляет панель управления к видеоролику. Вид панели и её содержимое зависит от браузера и может в себя включать кнопку воспроизведения, паузы, перемотки, перехода в полноэкранный режим; ползунка для изменения уровня громкости и др.

Синтаксис

1

<video controls="controls"></video>

Значения

В качестве значения указывается controls, также допустимо писать атрибут без значения.

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

По умолчанию этот атрибут выключен.

height¶

Атрибут height задаёт высоту области для воспроизведения видеоролика. Само видео меняет свои размеры в большую или меньшую сторону, чтобы вписаться в заданные рамки, но его пропорции при этом остаются прежними.

Синтаксис

1

<video height="<значение>"></video>

Значения

Любое целое положительное число в пикселях или процентах.

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

Исходная высота берётся из параметров видео. Если эти параметры не доступны, тогда height принимается равной высоте картинке, заданной атрибутом poster. В противном случае высота видео устанавливается 150 пикселей.

loop¶

Зацикливает воспроизведение видео, оно повторяется каждый раз с начала после завершения.

Синтаксис

1

<video loop="loop"></video>

Значения

В качестве значения указывается loop, также допустимо писать атрибут без значения.

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

По умолчанию этот атрибут выключен.

poster¶

Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Само изображение может быть в любом доступном формате: GIF, PNG, JPEG. Если атрибут poster не указан, браузер постарается отобразить первый кадр видео.

Синтаксис

1

<video poster="<адрес>"></video>

Значения

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

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

Нет.

preload¶

Используется для загрузки видео вместе с загрузкой веб-страницы. Этот атрибут игнорируется, если установлен autoplay.

Синтаксис

1

<video preload="none | metadata | auto"></video>

Значения

none

Не загружать видео.

metadata

Загрузить только служебную информацию (размеры видео, первый кадр, продолжительность и др.).

auto

Загрузить видео целиком при загрузке страницы.

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

none

src¶

Указывает путь к воспроизводимому видеоролику. Для этой же цели можно использовать элемент <source>.

Синтаксис

1

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

Значения

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

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

Нет.

width¶

Атрибут width задаёт ширину области для воспроизведения видеоролика. Само видео меняет свои размеры в большую или меньшую сторону, чтобы вписаться в указанную ширину, но его пропорции при этом не искажаются.

Синтаксис

1

<video width="<значение>"></video>

Значения

Любое целое положительное число в пикселях или процентах.

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

Исходная ширина берётся из параметров видео, если это значение не доступно, тогда width принимается равной ширине картинке, заданной атрибутом poster. Если этот атрибут не установлен, ширина устанавливается как 300 пикселей.

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

• WHATWG HTML Living Standard

Примеры¶

Пример 1¶

 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
26
27
28
29
30

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>video</title>
    </head>
    <body>
        <video
            width="400"
            height="300"
            controls="controls"
            poster="video/duel.jpg"
        >
            <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>

Пример 2¶

Первый пример воспроизводит видео, начиная воспроизведение, как только будет получено достаточное количество видео, чтобы позволить воспроизведение без паузы для загрузки еще. До начала воспроизведения видео на его месте отображается изображение "posterimage.jpg".

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- Простой пример с видео -->
<video
    src="videofile.ogg"
    autoplay
    poster="posterimage.jpg"
>
    Sorry, your browser doesn't support embedded videos, but
    don't worry, you can
    <a href="videofile.ogg">download it</a>
    and watch it with your favorite video player!
</video>

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<!-- Видео с субтитрами -->
<video src="foo.ogg">
    <track
        kind="subtitles"
        src="foo.en.vtt"
        srclang="en"
        label="English"
    />
    <track
        kind="subtitles"
        src="foo.sv.vtt"
        srclang="sv"
        label="Svenska"
    />
</video>

Пример 3¶

Пример нескольких источников

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<video
    width="480"
    controls
    poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif"
>
    <source
        src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
        type="video/mp4"
    />
    <source
        src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
        type="video/ogg"
    />
    <source
        src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
        type="video/webm"
    />
    Your browser doesn't support HTML5 video tag.
</video>

Поддержка браузерами¶

Can I Use video? Data on support for the video feature across the major browsers from caniuse.com.

Поддержка WebM видео-кодека:

Can I Use webm? Data on support for the webm feature across the major browsers from caniuse.com.

Поддержка Ogg/Theora видео-кодека:

Can I Use ogv? Data on support for the ogv feature across the major browsers from caniuse.com.

Поддержка MPEG-4/H.264 видео-кодека:

Can I Use mpeg4? Data on support for the mpeg4 feature across the major browsers from caniuse.com.

Поддержка HEVC/H.265 видео-кодека:

Can I Use hevc? Data on support for the hevc feature across the major browsers from caniuse.com.

См. также¶

• <audio>

Ссылки¶

• Тег <video> ^{MDN (рус.)}

Комментарии