Тег <​video​> в HTML: как вставить видео на сайт
2026-02-21 03:50 Diff
https://skillbox.ru/media/code/teg-video-v-html-kak-vstavit-video-na-sayt/

#статьи

  • 16 дек 2025
  • 0

Добавляем котиков и не только.

Иллюстрация: Polina Vari для Skillbox Media

Автор статей о программировании. 14 лет в IT. Умеет рассказывать о технологиях простыми словами. Автор спецпроекта Advertising for Social Change.

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

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

Содержание

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

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

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

Чтобы добавить ролик на страницу, нужно обернуть его в тег <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», браузер на смартфоне загрузит только начальный фрагмент.

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

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

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

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

Шаг 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 в браузере, увидите видеоплеер с кнопкой. Запустите видео и посмотрите, что вышло.

Скриншот: Google Chrome / Skillbox Media Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе