HTML5 видео и аудио: практическое руководство по тегам video и audio

HTML5 дал нативные теги для медиа — <video> и <audio>. Больше не нужны Flash и сторонние плагины: браузеры воспроизводят файлы, показывают субтитры, позволяют включать авто‑воспроизведение (с нюансами) и даже работать в «картинке в картинке». Ниже — концентрат практики под запрос «как вставить видео на сайт» с примерами кода и советами по доступности и производительности.

Быстрый старт: базовая вставка видео и аудио

Минимально рабочий пример с несколькими источниками, субтитрами и фолбэком для старых браузеров:

<figure>
  <video controls width="720" poster="poster.jpg" preload="metadata">
    <source src="movie-720.mp4" type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
    <source src="movie-720.webm" type="video/webm; codecs=vp9, opus">
    <track kind="captions" src="subs/ru.vtt" srclang="ru" label="Русский" default>
    <track kind="captions" src="subs/en.vtt" srclang="en" label="English">
    Ваш браузер не поддерживает HTML5 видео. <a href="movie-720.mp4">Скачать файл</a>.
  </video>
  <figcaption>Тег video с несколькими форматами и субтитрами</figcaption>
</figure>

<audio controls preload="none">
  <source src="podcast.ogg" type="audio/ogg; codecs=opus">
  <source src="podcast.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает HTML5 аудио. <a href="podcast.mp3">Скачать подкаст</a>.
</audio>

• Используйте несколько <source> с атрибутом type — браузер выберет поддерживаемый формат (обычно MP4/H.264 + WebM/VP9).
• poster показывает изображение до старта воспроизведения (только для видео).
• preload="metadata" экономит трафик: грузятся метаданные, но не всё видео.
• Фолбэк‑ссылка на скачивание повышает доступность и лояльность пользователей.

Автовоспроизведение, mute и playsinline

Современные браузеры блокируют автоплей со звуком. Решение — запускать без звука и разрешить проигрывание «в линии» на iOS:

<video autoplay muted playsinline loop controls poster="intro.jpg">
  <source src="intro.mp4" type="video/mp4">
</video>

• autoplay работает надёжно только вместе с muted (без звука).
• playsinline разрешает воспроизведение внутри страницы в iOS, не разворачивая на весь экран.
• loop перезапускает ролик — полезно для фоновых видео.

Субтитры, описания и главы: <track> и WebVTT

Субтитры, альтернативные описания и главы подключаются через <track>. Самый частый кейс — kind="captions" с файлом .vtt (формат WebVTT).

<video controls width="720" crossorigin="anonymous">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="subs/ru.vtt" srclang="ru" label="Русский" default>
  <track kind="captions" src="subs/en.vtt" srclang="en" label="English">
  <track kind="chapters" src="subs/chapters.vtt" srclang="ru" label="Главы">
</video>

Пример файла subs/ru.vtt:

WEBVTT

00:00:00.000 --> 00:00:03.000
Привет! Это демо субтитров.

00:00:03.000 --> 00:00:06.500
HTML5 видео: переключайте дорожки в плеере.

Частые нюансы с субтитрами:

• Если дорожка грузится с другого домена, добавьте на <video> crossorigin="anonymous" и настройте на сервере заголовок CORS: Access-Control-Allow-Origin: *.
• Указывайте корректный srclang (например, ru, en), чтобы браузер и скринридеры понимали язык дорожки.
• kind="descriptions" — для аудиоописаний; kind="chapters" — для оглавления.

Контроль интерфейса: controlsList, PiP и фулскрин

Можно ограничить элементы UI по бизнес‑требованиям (понимая, что это не защита от скачивания):

<video controls controlsList="nodownload nofullscreen noplaybackrate" disablepictureinpicture>
  <source src="lesson.mp4" type="video/mp4">
</video>

• controlsList поддерживает значения: nodownload, nofullscreen, noplaybackrate (поддержка разнится).
• disablepictureinpicture отключает «Картинку в картинке».
• Помните: полностью запретить сохранение видео на стороне клиента нельзя — ограничения носят косметический характер.

Оптимизация и производительность

• preload: none | metadata | auto. Для ленивых превью используйте metadata или none; для героев‑шапок — по ситуации, измеряйте WebPageTest/Performance API.
• Подбирайте битрейт и разрешение под макеты. Не грузите 4K там, где достаточно 720p.
• Выкладывайте минимум два формата: MP4 (H.264/AAC) + WebM (VP9/Opus) — покрытие лучше.
• Задайте размеровому контейнеру соотношение сторон через CSS aspect-ratio, чтобы избежать прыжков контента при загрузке.
• Для длинных эфиров используйте потоковые форматы (HLS/DASH). Safari воспроизводит HLS нативно; в других браузерах помогут библиотеки на базе MSE (например, hls.js).

Кастомные элементы управления (минимальный пример)

Иногда нужны свои кнопки. Ниже — простой play/pause и ползунок времени.

<video id="v1" width="720" preload="metadata">
  <source src="movie.mp4" type="video/mp4">
</video>
<div class="player-ui">
  <button id="play" aria-controls="v1" aria-label="Воспроизвести или пауза">▶︎/⏸</button>
  <input id="seek" type="range" min="0" value="0" aria-label="Позиция видео">
</div>
<script>
  const v = document.getElementById('v1');
  const playBtn = document.getElementById('play');
  const seek = document.getElementById('seek');

  v.addEventListener('loadedmetadata', () => {
    seek.max = Math.floor(v.duration || 0);
  });
  v.addEventListener('timeupdate', () => {
    seek.value = Math.floor(v.currentTime || 0);
  });
  playBtn.addEventListener('click', () => {
    if (v.paused) v.play(); else v.pause();
  });
  seek.addEventListener('input', () => {
    v.currentTime = Number(seek.value);
  });
</script>

Добавляйте aria‑атрибуты и подписи, чтобы кастомный плеер оставался доступным для клавиатуры и скринридеров.

Доступность: подписи, подписи к фигурам и транскрипты

• Оборачивайте видео в <figure> и поясняйте смысл через <figcaption> — это помогает всем пользователям и улучшает SEO.
• Субтитры (captions) обязательны для обучающих и маркетинговых роликов: это доступность и удержание внимания без звука.
• Для аудио размещайте ниже краткий текстовый транскрипт содержимого — его найдут поисковики и люди со слуховыми ограничениями.

Частые ошибки и как их исправить

• Автоплей не работает — добавьте muted и playsinline (особенно для iOS).
• Субтитры не подгружаются — проверьте MIME‑тип (.vtt), путь и CORS: добавьте crossorigin="anonymous" и Access-Control-Allow-Origin на сервере. 
• Видео «не выбирается» — указывайте корректный type в <source>, чтобы браузер не тратил время на неподдерживаемый контейнер/кодек.
• Прыжки макета (CLS) — задайте контейнеру aspect-ratio или фиксированные размеры, используйте poster соответствующего разрешения.
• Слишком тяжёлые файлы — перекодируйте с разумным битрейтом, удалите избыточные аудиодорожки/метаданные, включите сжатие на сервере (gzip/brotli для VTT).

Когда выбирать потоковое видео (HLS/DASH)

Если ролики длинные, аудитория на слабых сетях или нужен адаптивный битрейт — переходите на HLS/DASH. Для Safari HLS работает нативно; для Chromium/Firefox используйте hls.js (MSE). Даже с HLS финальная вёрстка остаётся HTML5 <video> c одним src, а библиотека подключает сегменты под капотом.

Итог и куда двигаться дальше

Теги <video> и <audio> закрывают 90% задач: многослойные форматы, субтитры, авто‑воспроизведение без звука, управление UI и доступность. Начните с базовой разметки, добавьте дорожки, оптимизируйте загрузку и только потом усложняйте кастомным UI или потоковым вещанием. Хотите закрепить навыки вёрстки на практике? Попробуйте пошаговый курс «Вёрстка сайта с нуля 2.0» — практикум с реальными макетами.