<video>
- 25 января 2023
Тег <video>
используется для вставки видео на веб-страницу. Он позволяет пользователю воспроизводить, ставить на паузу и управлять воспроизведением видео.
Синтаксис тега <video>
<video src="video.mp4" width="640" height="360" controls>.
Ваш браузер не поддерживает тег <code>video</code>.
</video>
Атрибут src
указывает URL видеофайла, а атрибуты width
и height
задают размеры видеоплеера. Атрибут controls
отображает элементы управления видеоплеером.
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <video>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Базовый пример:
<video src="video.mp4" width="640" height="360" controls>
Ваш браузер не поддерживает тег <code>video</code>.
</video>
Автовоспроизведение:
<video src="video.mp4" width="640" height="360" autoplay muted>
Ваш браузер не поддерживает тег <code>video</code>.
</video>
Несколько источников для разных браузеров:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Ваш браузер не поддерживает тег <code>video</code>.
</video>
Для воспроизведения/паузы видео:
const video = document.querySelector('video');
function playPause() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
Для получения текущего времени воспроизведения:
const video = document.querySelector('video');
const timeDisplay = document.querySelector('#time-display');
function updateTime() {
timeDisplay.innerHTML = video.currentTime;
}
Чтобы выключить или выключить звук видео:
const video = document.querySelector('video');
function muteUnmute() {
if (video.muted) {
video.muted = false;
} else {
video.muted = true;
}
}
Для изменения скорости воспроизведения:
const video = document.querySelector('video');
const speedControl = document.querySelector('#speed-control');
function changeSpeed() {
video.playbackRate = speedControl.value;
}
Для чего использовать тег <video>
- Показать видео на странице. Например, вставить видео-рекламу на страницу или показать видео-урок.
- Создание видео-галерей. Тег
<video>
позволяет создать видео-галерею на странице. - Создание HTML5-игр. Вместе с тегом
<canvas>
данный тег позволяет создавать интерактивные игры для браузеров. - Стриминговое воспроизведение видео. Возможность стримингового воспроизведения видео позволяет снизить время ожидания загрузки видео.
Атрибуты тега <video>
src
— путь к видеофайлу.
controls
— отображает элементы управления видеопроигрывателем.
width
— ширина видео.
height
— высота видео.
poster
— устанавливает изображение-обложку для видео.
autoplay
— включает автовоспроизведение видео.
loop
— зацикливает воспроизведение видео.
muted
— выключает звук в видео.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
- тег
<video>
не работает в некоторых старых версиях Internet Explorer; - различные браузеры поддерживают разные форматы видео, поэтому для обеспечения максимальной совместимости может потребоваться несколько источников видео.
Нюансы
- если используется атрибут
autoplay
, видео начнет воспроизводиться автоматически при загрузке страницы, что может быть нежелательно в некоторых случаях; - если используется атрибут
loop
, видео будет воспроизводиться по кругу бесконечно, что может быть нежелательно в некоторых случаях.
Поддержка браузеров
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
Теги <embed>
и <object>
также могут быть использованы для встраивания видеоконтента на веб-страницу.
Чем заменить тег
Используйте сторонний видеоплеер, например YouTube или Vimeo, для вставки видео на ваш сайт.
Актуальность
Тег <video>
не является устаревшим.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023