Тег <​video​> в HTML: как вставить видео на сайт

За добавление роликов на сайт отвечает тег <video>. Он позволяет выводить встроенный плеер, управлять автозапуском, показывать обложку до старта, подключать субтитры и выбирать форматы файлов под разные браузеры.

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

Содержание

• Зачем нужен тег <video>
• Как встроить видео в HTML
• Какие видеоформаты работают в браузерах
• Как добавить субтитры на разных языках
• Как управлять загрузкой и автовоспроизведением
• Как настроить внешний вид плеера
• Какие особенности у видео на мобильных устройствах
• Практика: как создать интерактивное видео через значение metadata

Зачем нужен тег <video>

До HTML5 вставлять видео на сайты было очень сложно: для этого требовался Flash или самописные видеоплееры. Теперь видео вставляется так же, как картинка: в теге прописывается путь к файлу и дополнительные атрибуты.

С помощью <video> можно контролировать, как видео запускается и выглядит. Можно сделать так, чтобы видео начиналось автоматически, или показывать картинку-обложку до старта, а ещё можно добавить субтитры на разных языках.

Внешний вид плеера тоже можно подправить. По умолчанию браузер показывает стандартные кнопки, однако с помощью CSS можно изменить цвета и размеры или спрятать лишние функции. JavaScript позволит менять громкость, скорость воспроизведения или реагировать на события вроде окончания ролика.

Читайте также:

HTML: что это такое, как работает, структура HTML-документа

Как встроить видео в HTML

Чтобы добавить ролик на страницу, нужно обернуть его в тег <video> и указать путь к файлу. Браузер выведет встроенный плеер с элементами управления — пользователь сможет запускать, останавливать и перематывать видео.

Кроме того, у <video> есть настройки: можно включить автозапуск, задать обложку до старта воспроизведения или подключить субтитры.

Простейший синтаксис выглядит так:

<video src="video.mp4" controls></video>

Здесь src указывает путь к ролику, а controls включает элементы управления: кнопки воспроизведения и паузы, регулятор громкости и полосу прогресса.

Какие видеоформаты работают в браузерах

Все браузеры по-разному относятся к форматам роликов. Универсального варианта нет — поэтому чаще всего указывают несколько источников. Браузер сам выберет первый подходящий файл и начнёт его воспроизводить.

• MP4 — самый надёжный формат. Его поддерживают почти все современные браузеры: Chrome, Safari, Firefox и Edge.
• WebM — открытый формат, который хорошо работает в Chrome, Firefox и Opera. Он позволяет уменьшить размер файла, сохраняя при этом нормальное качество. Обычно его указывают как альтернативу.
• OGG — устаревший формат, который многие браузеры не поддерживают. Знать о нём полезно, но использовать не стоит. Если хотите, можете указать его вместе с MP4 и WebM, но двух форматов вполне достаточно.

Для добавления нескольких разных форматов внутри <video> используйте несколько вложенных тегов <source>:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  Ваш браузер не поддерживает тег video.
</video>

Каждый <source> описывает отдельный файл и его формат. Если браузер не поддерживает ни один из форматов (или тег <video>), пользователь увидит текст «Ваш браузер не поддерживает тег video» — это лучше, чем просто пустое место.

Как добавить субтитры на разных языках

Субтитры помогают людям с ограниченными возможностями и тем, кто не владеет языком, звучащим на видеозаписи. Их добавляют с помощью вложенного тега <track>, который загружает текстовые дорожки из файлов и делает видео доступным для всех. Посмотрите пример с субтитрами на двух языках:

<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_ru.vtt" kind="subtitles" srclang="ru" label="Русский">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

У тега <track> есть несколько атрибутов. Первый из них — kind. Он сообщает браузеру, какого типа субтитры добавлены в видео. Это важно, поскольку разные типы отображаются по-разному. У атрибута kind четыре основных значения:

• subtitles — обычные субтитры.
• captions — субтитры с описанием звуковых эффектов. В них текстом обозначаются диалоги, смех, шаги, закрывающиеся двери и другие важные для понимания контекста звуки. Они сделаны для людей с нарушениями слуха, чтобы передать полную звуковую картину происходящего.
• descriptions — краткие описания происходящего на экране: «персонаж поднимает голову», «на экране появляется схема», «камера приближается к объекту». Браузер не показывает этот текст поверх видео и не озвучивает его. Такие субтитры предназначены для программ экранного доступа, которые читают текст вслух людям с нарушениями зрения.
• metadata — служебные данные, которые не видит пользователь. Например, можно создать таймер, который покажет подсказку или подсветит кнопку, когда пользователь досмотрит до определённого момента. В разделе «Практика» мы разберём на примере, как работать с этими субтитрами.

Помимо kind, у тега <track> есть атрибуты srclang и label. Атрибут srclang указывает двухбуквенный код языка субтитров по стандарту ISO 639-1 (например, en для английского). Атрибут label задаёт понятное пользователю название дорожки субтитров, которое отображается в меню выбора языка плеера.

Как управлять загрузкой и автовоспроизведением

У тега <video> есть несколько атрибутов, которые управляют поведением плеера.

Атрибут autoplay запускает воспроизведение сразу после загрузки страницы. В большинстве браузеров он работает вместе с muted. Атрибут muted включает видео без звука — пользователь может включить звук самостоятельно:

<video src="movie.mp4" autoplay muted></video>

Атрибут loop зацикливает ролик, чтобы он снова запускался после окончания:

<video src="movie.mp4" loop controls></video>

Атрибут preload — подсказывает браузеру, как загружать видео до нажатия на «Воспроизведение». У него может быть несколько значений: none — не загружать файл заранее; metadata — загрузить только информацию о файле (длительность, размер); auto — постараться загрузить весь файл. Пример реализации в коде:

<video src="movie.mp4" preload="metadata" controls></video>

Атрибут poster — задаёт заставку, которая отображается до воспроизведения:

<video src="movie.mp4" poster="preview.jpg" controls></video>

Атрибут playsinline — позволяет воспроизводить видео прямо внутри страницы на мобильных устройствах, без разворота на весь экран:

<video src="movie.mp4" playsinline controls></video>

Как настроить внешний вид плеера

Для задания ширины и высоты используются атрибуты width и height:

<video src="movie.mp4" width="640" height="360" controls></video>

Для управления кнопками используйте атрибут controlslist вместе с атрибутом controls. Перечислим доступные значения:

• nodownload — скрывает кнопку Скачать видео. Но от продвинутых пользователей это не поможет: они всё равно смогут скачать файл через инструменты разработчика или сетевые запросы.
• noplaybackrate — убирает возможность менять скорость воспроизведения.
• nofullscreen — в некоторых браузерах запрещает переход в полноэкранный режим.
• noremoteplayback — отключает передачу на внешние устройства.

<video src="movie.mp4" width="640" height="360" controls></video><video src="movie.mp4" controls controlslist="nodownload noplaybackrate noremoteplayback">
</video>

Поддержка атрибута controlslist неполная — 80,19% по данным сайта Can I use на момент обзора. Он работает в Chrome и Edge, но недоступен в Firefox и Safari.

Какие особенности у видео на мобильных устройствах

Работа с видео на смартфонах и планшетах отличается от десктопа, поскольку браузеры экономят батарею и мобильный трафик. Из-за этого нужно учитывать дополнительные ограничения, чтобы все ваши видео корректно загружались.

Автовоспроизведение. Мобильные браузеры блокируют autoplay для видео со звуком. Чтобы видео запускалось автоматически, добавьте атрибут muted:

<video src="movie.mp4" autoplay muted playsinline></video>

Полноэкранный режим по умолчанию. В iOS Safari видео долгое время автоматически открывалось на весь экран при нажатии кнопки воспроизведения. Это мешало встроить видео в дизайн страницы. Начиная с iOS 10 вы можете управлять этим поведением с помощью атрибута playsinline — он позволяет включать видео внутри блока на странице, не разворачивая его на весь экран.

Управление жестами. На смартфонах пользователи чаще взаимодействуют с видео касаниями и свайпами, поэтому интерфейс плеера может отличаться от десктопного. Например, двойное касание может перематывать видео вперёд или назад, а свайп вверх или вниз — регулировать громкость или яркость экрана.

Оптимизация под сеть. Мобильные браузеры часто игнорируют атрибут preload, чтобы сэкономить трафик и заряд батареи. Вместо того чтобы загружать весь видеофайл заранее, они подгружают его частями по мере воспроизведения — такой процесс называется потоковой загрузкой. Поэтому, даже если вы укажете preload="auto», браузер на смартфоне загрузит только начальный фрагмент.

Читайте также:

Медиазапросы в CSS: как настроить адаптивную вёрстку сайта

Практика: как создать интерактивное видео через значение metadata

В этом разделе мы немного попрактикуемся и добавим видео на страницу. Когда ролик дойдёт до заранее заданной секунды, на экране появится жёлтая подсказка с текстом, а затем кнопка под видео изменит цвет с белого на красный.

Шаг 1. Создайте отдельную папку на компьютере для всех файлов проекта. Назовите её, например, metadata-demo. Добавьте в неё три файла:

• index.html — сюда мы добавим HTML-разметку страницы.
• style.css — здесь будут стили для внешнего вида.
• script.js — в этом файле мы пропишем логику работы подсказок и реакций.

Также нам понадобится короткий видеофайл — назовите его movie.mp4. Для проекта можете скачать случайное видео, сгенерированное «Шедеврумом».

Читайте также:

Быстрый способ подключить CSS к HTML

Шаг 2. Откройте файл index.html в любом редакторе кода. Затем вставьте в него следующую разметку — она добавит на страницу видеоплеер, подсказку и кнопку:

<!doctype html>
<html lang="ru">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <title>Интерактивное видео через metadata</title>

  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">

    <!-- Видеоплеер с атрибутом controls -->
    <video id="video" controls>
      <!-- Добавьте свой файл movie.mp4 в папку проекта -->
      <source src="movie.mp4" type="video/mp4">
    </video>

    <!-- Блок для отображения подсказок -->
    <div id="hint">Привет, это подсказка!</div>

    <!-- Кнопка для взаимодействия -->
    <button id="targetBtn">Целевая кнопка</button>

  </div>

  <script src="script.js"></script>

</body>

</html>

Шаг 3. Теперь перейдём к файлу style.css, который будет отвечать за внешний вид контейнера, видео, кнопки и подсказки. Добавьте в него такой фрагмент:

body {
  font-family: sans-serif;
  padding: 10px;
  display: flex;
  justify-content: center;
  background: #f0f0f0;
}

.container {
  width: 320px;
  position: relative;
}

video {
  width: 100%;
  border-radius: 6px;
  background: black;
  display: block;
}

#hint {
  position: absolute;
  top: 10px;
  left: 10px;
  background: yellow;
  color: black;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  /* По умолчанию подсказка скрыта, показывается через JavaScript */
  display: none;
  font-size: 12px;
  font-weight: bold;
}

#targetBtn {
  margin-top: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: white;
  /* Плавное изменение цвета при добавлении класса active */
  transition: 0.2s;
}

/* Класс active меняет цвет кнопки на красный */
#targetBtn.active {
  background: red;
  color: white;
}

Шаг 4. Перейдём к файлу script.js. Создадим дорожку метаданных и укажем, какие события должны происходить в нужные моменты. Когда видео дойдёт до третьей секунды, появится подсказка. Когда до шестой — подсветится кнопка.

// Получаем элементы со страницы
const video = document.getElementById("video");
const hint = document.getElementById("hint");
const btn = document.getElementById("targetBtn");

// Показываем подсказку на заданное время
function showHint(duration = 2) {
  hint.style.display = "block";
  setTimeout(() => hint.style.display = "none", duration * 1000);
}

// Подсвечиваем кнопку на заданное время
function highlightButton(duration = 2) {
  btn.classList.add("active");
  setTimeout(() => btn.classList.remove("active"), duration * 1000);
}

// Создаём трек с метаданными
const track = video.addTextTrack("metadata", "MetaTrack");
track.mode = "hidden";

// Добавляем временные метки (cue) — они срабатывают в указанные секунды видео
track.addCue(new VTTCue(3, 5, "showHint"));
track.addCue(new VTTCue(6, 8, "highlight"));

// Обрабатываем событие cuechange — срабатывает при изменении активной метки
track.addEventListener("cuechange", () => {
  const cues = track.activeCues;
  for (let i = 0; i < cues.length; i++) {
    const cue = cues[i];
   
    // Запускаем нужное действие в зависимости от метки
    if (cue.text === "showHint") showHint();
    if (cue.text === "highlight") highlightButton();
  }
});

Если вы повторили все действия, то, открыв файл index.html в браузере, увидите видеоплеер с кнопкой. Запустите видео и посмотрите, что вышло.

Что еще почитать

• Официальный стандарт с описанием атрибутов <video> (English)
• Типы видеоформатов, доступные для интернет-браузеров
• Поддерживаемые форматы по разным браузерам (English)