Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>16 дек 2025</li>

3 <li>0</li>

4 </ul>Добавляем котиков и не только.

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

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

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

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

9 Содержание

10 <ul><li><a>Зачем нужен тег <video></a></li>

11 <li><a>Как встроить видео в HTML</a></li>

12 <li><a>Какие видеоформаты работают в браузерах</a></li>

13 <li><a>Как добавить субтитры на разных языках</a></li>

14 <li><a>Как управлять загрузкой и автовоспроизведением</a></li>

15 <li><a>Как настроить внешний вид плеера</a></li>

16 <li><a>Какие особенности у видео на мобильных устройствах</a></li>

17 <li><a>Практика: как создать интерактивное видео через значение metadata</a></li>

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

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

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

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

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

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

24 <video src="video.mp4" controls></video>Здесь src указывает путь к ролику, а controls включает элементы управления: кнопки воспроизведения и паузы, регулятор громкости и полосу прогресса.

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

26 <ul><li>MP4 - самый надёжный формат. Его поддерживают почти все современные браузеры: Chrome, Safari, Firefox и Edge.</li>

27 <li>WebM - открытый формат, который хорошо работает в Chrome, Firefox и Opera. Он позволяет уменьшить размер файла, сохраняя при этом нормальное качество. Обычно его указывают как альтернативу.</li>

28 <li>OGG - устаревший формат, который многие браузеры не поддерживают. Знать о нём полезно, но использовать не стоит. Если хотите, можете указать его вместе с MP4 и WebM, но двух форматов вполне достаточно.</li>

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

30 <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" - это лучше, чем просто пустое место.

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

32 <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 четыре основных значения:

33 <ul><li>subtitles - обычные субтитры.</li>

34 <li>captions - субтитры с описанием звуковых эффектов. В них текстом обозначаются диалоги, смех, шаги, закрывающиеся двери и другие важные для понимания контекста звуки. Они сделаны для людей с нарушениями слуха, чтобы передать полную звуковую картину происходящего.</li>

35 <li>descriptions - краткие описания происходящего на экране: "персонаж поднимает голову", "на экране появляется схема", "камера приближается к объекту". Браузер не показывает этот текст поверх видео и не озвучивает его. Такие субтитры предназначены для программ экранного доступа, которые читают текст вслух людям с нарушениями зрения.</li>

36 <li>metadata - служебные данные, которые не видит пользователь. Например, можно создать таймер, который покажет подсказку или подсветит кнопку, когда пользователь досмотрит до определённого момента. В разделе "Практика" мы разберём на примере, как работать с этими субтитрами.</li>

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

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

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

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

40 <video src="movie.mp4" autoplay muted></video>Атрибут loop зацикливает ролик, чтобы он снова запускался после окончания:

41 <video src="movie.mp4" loop controls></video>Атрибут preload - подсказывает браузеру, как загружать видео до нажатия на "Воспроизведение". У него может быть несколько значений: none - не загружать файл заранее; metadata - загрузить только информацию о файле (длительность, размер); auto - постараться загрузить весь файл. Пример реализации в коде:

42 <video src="movie.mp4" preload="metadata" controls></video>Атрибут poster - задаёт заставку, которая отображается до воспроизведения:

43 <video src="movie.mp4" poster="preview.jpg" controls></video>Атрибут playsinline - позволяет воспроизводить видео прямо внутри страницы на мобильных устройствах, без разворота на весь экран:

44 <video src="movie.mp4" playsinline controls></video>Для задания ширины и высоты используются атрибуты width и height:

45 <video src="movie.mp4" width="640" height="360" controls></video>Для управления кнопками используйте атрибут controlslist вместе с атрибутом controls. Перечислим доступные значения:

46 <ul><li>nodownload - скрывает кнопку Скачать видео. Но от продвинутых пользователей это не поможет: они всё равно смогут скачать файл через инструменты разработчика или сетевые запросы.</li>

47 <li>noplaybackrate - убирает возможность менять скорость воспроизведения.</li>

48 <li>nofullscreen - в некоторых браузерах запрещает переход в полноэкранный режим.</li>

49 <li>noremoteplayback - отключает передачу на внешние устройства.</li>

50 </ul><video src="movie.mp4" width="640" height="360" controls></video><video src="movie.mp4" controls controlslist="nodownload noplaybackrate noremoteplayback"> </video>Поддержка атрибута controlslist неполная - 80,19% по данным сайта<a>Can I use</a>на момент обзора. Он работает в Chrome и Edge, но недоступен в Firefox и Safari.

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

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

53 <video src="movie.mp4" autoplay muted playsinline></video>Полноэкранный режим по умолчанию.В iOS Safari видео долгое время автоматически открывалось на весь экран при нажатии кнопки воспроизведения. Это мешало встроить видео в дизайн страницы. Начиная с iOS 10 вы можете управлять этим поведением с помощью атрибута playsinline - он позволяет включать видео внутри блока на странице, не разворачивая его на весь экран.

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

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

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

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

58 <ul><li>index.html - сюда мы добавим HTML-разметку страницы.</li>

59 <li>style.css - здесь будут стили для внешнего вида.</li>

60 <li>script.js - в этом файле мы пропишем логику работы подсказок и реакций.</li>

61 </ul>Также нам понадобится короткий видеофайл - назовите его movie.mp4. Для проекта можете скачать случайное видео, сгенерированное "<a>Шедеврумом</a>".

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

63 <!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">  <video id="video" controls>  <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, который будет отвечать за внешний вид контейнера, видео, кнопки и подсказки. Добавьте в него такой фрагмент:

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

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

66 Скриншот: Google Chrome / Skillbox Media<ul><li><a>Официальный стандарт с описанием атрибутов <video></a>(English)</li>

67 <li><a>Типы видеоформатов, доступные для интернет-браузеров</a></li>

68 <li><a>Поддерживаемые форматы по разным браузерам</a>(English)</li>

69 </ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>