Аудио и видео

Элементы <audio> и <video> встраивают мультимедиа-контент напрямую в HTML без сторонних плагинов.

Зачем нужно

До HTML5 для мультимедиа требовался Flash. Сейчас <audio> и <video> -- нативные элементы с встроенными контролами, API для JavaScript и поддержкой субтитров. Это быстрее, безопаснее и доступнее.

Где используется

• Видеоплееры на сайтах
• Подкасты и музыкальные плееры
• Фоновое видео на лендингах
• Обучающие платформы (видеоуроки с субтитрами)

Предпосылки

• Теги и атрибуты

<video> -- видео

Базовый пример

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

С несколькими источниками (fallback)

<video controls width="640" height="360" poster="thumbnail.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <p>Ваш браузер не поддерживает видео.
    <a href="video.mp4">Скачать видео</a>.
  </p>
</video>

Браузер выберет первый поддерживаемый формат.

Атрибуты <video>

Атрибут	Описание
src	URL видеофайла
controls	Показать элементы управления
autoplay	Автовоспроизведение (требует muted)
muted	Без звука
loop	Зациклить
poster	Картинка-превью до начала воспроизведения
width / height	Размеры плеера
preload	none / metadata / auto -- что предзагружать
playsinline	Воспроизводить inline на iOS (не fullscreen)
crossorigin	CORS для внешних источников

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

Браузеры блокируют autoplay с включённым звуком. Для автовоспроизведения нужен muted:

<!-- РАБОТАЕТ: autoplay + muted -->
<video autoplay muted loop playsinline>
  <source src="bg-video.webm" type="video/webm">
  <source src="bg-video.mp4" type="video/mp4">
</video>

<!-- НЕ РАБОТАЕТ: autoplay без muted (браузер заблокирует) -->
<video autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

Preload -- что предзагружать

<!-- Ничего не загружать заранее (экономия трафика) -->
<video preload="none" controls poster="thumb.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Загрузить только метаданные (длительность, размеры) -->
<video preload="metadata" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Загрузить как можно больше (для важного видео) -->
<video preload="auto" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Фоновое видео на лендинге

<div class="hero">
  <video class="hero__video" autoplay muted loop playsinline preload="auto">
    <source src="hero.webm" type="video/webm">
    <source src="hero.mp4" type="video/mp4">
  </video>
  <div class="hero__content">
    <h1>Добро пожаловать</h1>
  </div>
</div>

<style>
  .hero {
    position: relative;
    overflow: hidden;
    height: 100vh;
  }
  .hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
  }
  .hero__content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    padding-top: 40vh;
  }
</style>

<audio> -- аудио

Базовый пример

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

Атрибуты <audio>

Атрибут	Описание
src	URL аудиофайла
controls	Показать элементы управления
autoplay	Автовоспроизведение
muted	Без звука
loop	Зациклить
preload	none / metadata / auto

Подкаст-плеер

<figure>
  <figcaption>Подкаст: Введение в HTML, Эпизод 1</figcaption>
  <audio controls preload="metadata">
    <source src="episode-01.mp3" type="audio/mpeg">
    <a href="episode-01.mp3">Скачать эпизод (MP3, 45 МБ)</a>
  </audio>
</figure>

<track> -- субтитры и метаданные

<video controls width="640" height="360">
  <source src="lecture.mp4" type="video/mp4">

  <!-- Субтитры -->
  <track
    kind="subtitles"
    src="subs-ru.vtt"
    srclang="ru"
    label="Русские"
    default
  >
  <track
    kind="subtitles"
    src="subs-en.vtt"
    srclang="en"
    label="English"
  >

  <!-- Скрытые субтитры (для глухих/слабослышащих) -->
  <track kind="captions" src="captions-ru.vtt" srclang="ru" label="Субтитры (рус)">

  <!-- Описание для слепых -->
  <track kind="descriptions" src="desc-ru.vtt" srclang="ru" label="Аудиоописание">

  <!-- Главы -->
  <track kind="chapters" src="chapters.vtt" srclang="ru" label="Главы">
</video>

Формат WebVTT для субтитров

Файл subs-ru.vtt:

WEBVTT

00:00:01.000 --> 00:00:04.000
Добро пожаловать на курс по HTML.

00:00:05.000 --> 00:00:09.000
Сегодня мы разберём основы разметки.

00:00:10.000 --> 00:00:15.000
Начнём с простейшего HTML-документа.

Значение kind	Назначение
subtitles	Субтитры (перевод диалогов)
captions	Скрытые субтитры (диалоги + звуковые эффекты, для глухих)
descriptions	Аудиоописание визуального контента (для слепых)
chapters	Разделы видео (навигация)
metadata	Машиночитаемые данные

Форматы

Видеоформаты

Формат	MIME-тип	Поддержка
MP4 (H.264)	video/mp4	Везде
WebM (VP9)	video/webm	Chrome, Firefox, Edge
WebM (AV1)	video/webm; codecs="av01"	Новые браузеры

Аудиоформаты

Формат	MIME-тип	Поддержка
MP3	audio/mpeg	Везде
AAC	audio/aac	Везде
OGG Vorbis	audio/ogg	Chrome, Firefox
WAV	audio/wav	Везде
FLAC	audio/flac	Почти везде

JavaScript API

<video id="player" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<button onclick="player.play()">Play</button>
<button onclick="player.pause()">Pause</button>
<button onclick="player.currentTime = 0">В начало</button>

<script>
  const player = document.getElementById('player');

  // Свойства
  console.log(player.duration);     // Длительность в секундах
  console.log(player.currentTime);  // Текущая позиция
  console.log(player.paused);       // true/false
  console.log(player.volume);       // 0.0 - 1.0
  console.log(player.playbackRate); // Скорость (1.0 = нормальная)

  // События
  player.addEventListener('play', () => console.log('Играет'));
  player.addEventListener('pause', () => console.log('Пауза'));
  player.addEventListener('ended', () => console.log('Закончилось'));
  player.addEventListener('timeupdate', () => {
    console.log('Позиция:', player.currentTime);
  });
</script>

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

Ошибка	Почему плохо	Как правильно
autoplay без muted	Браузер заблокирует	autoplay muted
Нет fallback-текста	Пользователь без поддержки ничего не увидит	Добавь текст и ссылку на скачивание
Только один формат	Нет поддержки в каком-то браузере	<source> для нескольких форматов
Огромные видеофайлы	Медленная загрузка	Сжатие, preload="none", poster
Нет субтитров	Недоступно для глухих	Добавь <track> с captions
controls не указан	Пользователь не может управлять	Добавь controls или кастомный плеер

Практика

1. Вставь видео с <video> и двумя <source> (MP4 + WebM)
2. Добавь poster, controls, preload="metadata"
3. Создай файл .vtt с субтитрами и подключи через <track>
4. Сделай фоновое видео с autoplay muted loop playsinline
5. Вставь аудио-плеер <audio> в <figure> с <figcaption>
6. Через JS: кнопки Play/Pause, отображение currentTime

Связанные темы

• Изображения -- poster для видео
• Семантика для screen readers -- субтитры и доступность
• loading lazy -- оптимизация загрузки медиа

Ресурсы

• MDN: <video>
• MDN: <audio>
• MDN: <track>
• Дока: video
• Дока: audio
• WebVTT
• web.dev: Media