<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, видео будет воспроизводиться по кругу бесконечно, что может быть нежелательно в некоторых случаях.