Аудио и видео: тег video и audio

Как встроить видео и звук прямо в страницу средствами HTML5 — без Flash и сторонних плееров.

<video> и <audio> — встроенные теги HTML5, которые делают браузер медиаплеером: он сам рисует элементы управления, декодирует поток и показывает картинку или звук.

До 2010-х видео на сайтах показывали через Flash-плеер — отдельный плагин, который надо было устанавливать, который тёк по памяти и не работал на смартфонах. HTML5 убрал этот костыль: теперь видео и аудио — такие же родные элементы страницы, как картинка или абзац. Браузер сам отвечает за декодирование, буферизацию и панель управления.

Зачем это знать на практике

Грамотная вставка медиа решает сразу несколько реальных задач. Во-первых, скорость: видео — самый тяжёлый ресурс на странице, и неправильные атрибуты заставляют браузер качать мегабайты ещё до того, как пользователь нажал «play». Во-вторых, совместимость: один и тот же ролик надо отдавать в разных форматах, потому что не каждый браузер понимает каждый кодек. В-третьих, доступность: видео без субтитров бесполезно для глухих пользователей и невидимо для поисковиков.

Базовая разметка <video>

Минимальный рабочий пример — один тег с атрибутом controls, чтобы появилась панель воспроизведения:

<video src="lecture.mp4" controls width="640">
  Ваш браузер не поддерживает тег video.
</video>

Текст между открывающим и закрывающим тегами — это fallback: его увидят только в браузере, который вообще не знает про <video> (сегодня таких почти нет, но привычка полезная). Атрибут width задаёт ширину; высоту лучше не фиксировать жёстко, чтобы сохранить пропорции.

Главные атрибуты

Поведение плеера настраивается несколькими булевыми (присутствует = включено) и обычными атрибутами:

Собранный «фоновый» ролик, который часто видят на лендингах, выглядит так:

<video src="hero.webm" autoplay muted loop playsinline
       poster="hero-frame.jpg" width="1280"></video>

Атрибут playsinline важен для iPhone: без него видео на iOS принудительно открывается на весь экран, что для фона недопустимо.

Несколько форматов через <source>

Нет одного «универсального» видеофайла. Браузеры понимают разные контейнеры и кодеки, поэтому вместо атрибута src перечисляют несколько <source> — браузер берёт первый, который умеет проигрывать:

<video controls width="640" poster="cover.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4"  type="video/mp4">
  <p>Скачайте <a href="movie.mp4">видео</a> напрямую.</p>
</video>

Атрибут type подсказывает браузеру MIME-тип, чтобы он не качал заведомо неподходящий файл. Практичный набор на сегодня — WebM (VP9/AV1) как лёгкий современный вариант и MP4 (H.264) как максимально совместимый запасной. Порядок имеет значение: ставьте более выгодный формат первым.

Субтитры через <track>

Текстовая дорожка добавляется тегом <track> внутри <video>. Файл субтитров — в формате WebVTT (расширение .vtt):

<video controls width="640">
  <source src="talk.mp4" type="video/mp4">
  <track src="ru.vtt" kind="subtitles" srclang="ru"
         label="Русские" default>
  <track src="en.vtt" kind="captions" srclang="en" label="English">
</video>

Атрибут kind различает виды дорожек: subtitles — перевод речи, captions — субтитры с описанием звуков для глухих, descriptions — звуковое описание сцены, chapters — навигация по главам. default включает дорожку сразу. Сам файл .vtt устроен просто:

WEBVTT

00:00:01.000 --> 00:00:04.000
Привет! Сегодня говорим о HTML5-видео.

00:00:04.500 --> 00:00:07.000
Начнём с тега video.

Аудио: тег <audio>

Тег <audio> устроен идентично, только без картинки и атрибутов poster/width. Он удобен для подкастов, озвучки и звуковых эффектов:

<audio controls preload="metadata">
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.mp3"  type="audio/mpeg">
</audio>

Здесь Opus даёт отличное качество при крошечном весе, а MP3 — универсальный запасной формат. Атрибут preload="metadata" просит браузер скачать только длительность дорожки, а не весь файл сразу.

Как это работает под капотом

Когда браузер встречает <video>, он создаёт объект HTMLMediaElement и проходит по списку источников сверху вниз, для каждого спрашивая встроенный декодер: «сможешь это проиграть?». Первый подходящий источник выбирается, остальные игнорируются. Затем включается буферизация: браузер качает не весь файл целиком, а кусками, ориентируясь на атрибут preload и на то, какую часть таймлайна нужно показать. Поэтому ролик начинает играть, не дожидаясь полной загрузки.

Отдельная история — политика автозапуска. Чтобы сайты не оглушали посетителей, браузеры блокируют autoplay со звуком, пока пользователь не повзаимодействовал со страницей. Правило простое: автозапуск разрешён, только если видео muted (или вообще без звуковой дорожки). Поэтому фоновые ролики всегда сочетают autoplay + muted — иначе они просто не стартуют, и никакой ошибки в консоли может не быть.

Частые ошибки

• autoplay без muted. Видео молча не запускается — браузер заблокировал звук. Добавьте muted или дайте кнопку запуска.
• Один MP4 без запасных форматов. Работает, но вы теряете в весе; и наоборот — только WebM отвалится в старых Safari. Давайте оба <source>.
• preload="auto" на тяжёлом видео. Браузер качает мегабайты ещё до клика и тормозит загрузку страницы. На длинных роликах ставьте metadata или none.
• Сырые угловые скобки в .vtt-таймкоде. Стрелка времени пишется как -->; в HTML-примере её обязательно экранируют, иначе разметка ломается.
• Нет <track> с субтитрами. Видео недоступно глухим и хуже индексируется. Добавляйте хотя бы одну текстовую дорожку.

Итоги

• <video> и <audio> — родные плееры HTML5; controls включает панель управления.
• Несколько <source> с type покрывают разные браузеры: WebM первым, MP4 как запасной.
• autoplay со звуком блокируется — комбинируйте с muted и playsinline.
• preload управляет тем, сколько качать заранее; на тяжёлом видео берите metadata.
• Субтитры через <track kind="subtitles"> и файл WebVTT делают медиа доступным и SEO-видимым.