HTML тег <video>
Тег HTML5 <video> используется для встраивания видео в HTML-документ. Учебник W3Docs объясняет применение тега <video> с примерами.
Тег <video> является одним из элементов HTML5. Он используется для встраивания видеоплеера в HTML-документ. На этой странице рассматривается, как добавить видео, предоставить несколько форматов для поддержки разных браузеров, добавить субтитры для доступности, а также особенности атрибутов autoplay, poster, preload и loop.
Существует 3 широко поддерживаемых формата видео для элемента <video>: MP4/MPEG-4, WebM и Ogg. Поскольку ни один формат не работает во всех браузерах, обычно указывают несколько файлов с помощью вложенных элементов <source> (или единственного атрибута src). Большие видеофайлы сжимаются и распаковываются кодеками:
- MP4/MPEG-4 — видео H.264 со звуком AAC. Наиболее совместимый формат.
- WebM — видео VP8 или VP9 со звуком Vorbis или Opus.
- Ogg — видео Theora со звуком Vorbis.
Элемент <video> является замещаемым элементом с отображением display: block по умолчанию. Для управления заполнением кадра используйте CSS-свойства object-fit и object-position. Для отслеживания прогресса загрузки и воспроизведения используйте атрибуты медиасобытий.
Вы можете добавить субтитры или подписи с помощью элемента <track> и формата WebVTT (описано ниже). Тот же элемент может воспроизводить файлы только со звуком, хотя для контента только с аудио лучше использовать <audio>.
Синтаксис
Тег <video> парный. Содержимое записывается между открывающим (<video>) и закрывающим (</video>) тегами.
Пример HTML-тега <video> с атрибутами controls, muted и src:
Пример HTML-тега <video>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video{
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4" playsinline>
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
</video>
<p>Some information about video</p>
</body>
</html>Несколько источников и резервный текст
Когда вы перечисляете несколько элементов <source>, браузер воспроизводит первый из тех, которые он может декодировать, и игнорирует остальные. Поэтому указывайте их в порядке предпочтения — как правило, сначала WebM (меньше размер), затем MP4 (наибольшая совместимость) в качестве надёжного резерва. Атрибут type позволяет браузеру пропустить формат, который он не поддерживает, без скачивания файла.
Любое содержимое, размещённое между <video> и </video> (кроме <source> и <track>), отображается только в том случае, если браузер не может воспроизвести ни один из источников. Используйте его для резервного сообщения и ссылки на скачивание.
Всегда задавайте width и height (или фиксируйте размер в CSS), чтобы браузер резервировал место до загрузки видео. Это предотвращает смещение макета (CLS), при котором содержимое сдвигается при появлении плеера.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<video width="320" height="240" controls playsinline>
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
<!-- Shown only if no source can be played -->
Your browser doesn't support HTML video.
<a href="/build/videos/arcnet.io(7-sec).mp4">Download the video</a> instead.
</video>
<p>Some information about video</p>
</body>
</html>Атрибуты controls, autoplay, loop и muted являются булевыми — они не принимают значение. Само их наличие включает соответствующую функцию.
Субтитры и подписи с помощью <track>
Для обеспечения доступности добавьте элемент <track>, указывающий на файл WebVTT (.vtt). Атрибут kind указывает браузеру, как обрабатывать текстовую дорожку:
subtitles— перевод диалогов для зрителей, не понимающих язык.captions— транскрипция диалогов плюс важные незвуковые события (музыка, звуковые эффекты) для глухих и слабослышащих зрителей.descriptions— текстовое описание изображения, предназначенное для озвучивания зрителям, которые не могут видеть видео.chapters— названия глав для навигации по медиафайлу.
Предоставление субтитров для предварительно записанного видео удовлетворяет критерию успеха WCAG 2.1 1.2.2 (Captions). Используйте srclang для указания языка дорожки и default для её автоматического включения.
<video width="320" height="240" controls>
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
<track default kind="captions" srclang="en" label="English"
src="/build/videos/arcnet.io(7-sec).vtt" />
</video>Минимальный файл WebVTT выглядит следующим образом:
WEBVTT
00:00.000 --> 00:04.000
Welcome to the demo video.
00:04.000 --> 00:07.000
[upbeat music playing]Автовоспроизведение (и почему нужен muted)
Чтобы предотвратить навязчивую рекламу, большинство браузеров блокируют автовоспроизведение при наличии звука. Поэтому autoplay надёжно работает только при одновременном использовании muted:
<video autoplay muted loop controls playsinline width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>Автоматически воспроизводимые медиафайлы могут создавать серьёзные проблемы с доступностью — они способны отвлекать пользователей, мешать работе экранных дикторов и вызывать проблемы у людей с вестибулярными нарушениями. Держите автовоспроизводимые клипы без звука, короткими и предпочтительно давайте пользователям самостоятельно запускать воспроизведение. Всегда включайте controls, чтобы видео можно было поставить на паузу.
Атрибут poster
poster задаёт изображение-заглушку, которое отображается до начала воспроизведения видео (или пока не загрузится достаточно данных). Без него браузеры показывают первый кадр, который нередко оказывается пустым.
<video width="320" height="240" controls poster="/build/videos/cover.jpg">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>Атрибут preload
preload подсказывает браузеру, сколько данных загрузить до начала воспроизведения. Это лишь рекомендация — браузер может её игнорировать (и игнорирует при включённом autoplay).
<!-- Don't download anything until the user presses play -->
<video controls preload="none" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<!-- Fetch length/dimensions only — a good default -->
<video controls preload="metadata" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<!-- Buffer the whole file ahead of time -->
<video controls preload="auto" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>Атрибут loop
loop автоматически перезапускает видео при каждом его завершении. Наиболее полезен для коротких фоновых клипов, которые, как правило, используются совместно с autoplay muted.
<video loop autoplay muted playsinline width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| autoplay | autoplay | Указывает, что видео начнёт воспроизводиться автоматически, как только будет готово. |
| controls | controls | Отображает элементы управления, позволяющие пользователю управлять воспроизведением видео, включая громкость, перемотку и паузу/возобновление. |
| height | pixels | Задаёт высоту видеоплеера. |
| loop | loop | Указывает, что видео будет начинаться заново каждый раз при завершении. |
| muted | muted | Указывает, что видео изначально будет воспроизводиться без звука. |
| poster | URL | Задаёт изображение, которое отображается во время загрузки видео или до нажатия пользователем кнопки воспроизведения. |
| preload | auto, metadata, none | Подсказывает, сколько данных загрузить до воспроизведения (см. значения ниже). Игнорируется при включённом autoplay. |
| src | URL | Задаёт URL встраиваемого видео. Вместо него можно использовать элемент <source>. |
| width | pixels | Задаёт ширину плеера. |
Атрибут preload принимает три значения:
- none — видео не должно предварительно загружаться.
- metadata — загружаются только метаданные, такие как длительность и размеры.
- auto — весь видеофайл может быть загружен.
Тег <video> также поддерживает Глобальные атрибуты и Атрибуты событий.
Связанные элементы
<source>— задаёт один из нескольких медиафайлов для<video>или<audio>.<track>— добавляет субтитры, подписи или главы в виде дорожки WebVTT.<audio>— встраивает контент только со звуком.