Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<ul>

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

Справочник
  • 25 января 2023

<datalist>

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

Справочник
  • 25 января 2023

<caption>

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

Справочник
  • 25 января 2023

<ins>

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

Справочник
  • 25 января 2023