video и audio элементы
<video>и<audio>— нативные HTML5-элементы для встраивания медиаконтента прямо на страницу без Flash или сторонних плагинов.
Зачем нужно
Нативные медиаэлементы управляются браузером: он сам обрабатывает буферизацию, воспроизведение, управляющие элементы и доступность. Управление через JavaScript API (play, pause, currentTime) делает их основой для кастомных медиаплееров. Субтитры через <track> обеспечивают доступность для глухих и слабослышащих пользователей.
Где используется
- Обучающие платформы (видеокурсы, вебинары)
- Лендинги с видеопрезентацией продукта
- Подкасты и аудио-истории
- Фоновое видео на hero-секциях
- Кастомные медиаплееры
Элемент <video>
Базовый пример
<video
src="video.mp4"
width="800"
height="450"
controls
preload="metadata"
poster="preview.jpg">
Ваш браузер не поддерживает видео.
</video>
Несколько форматов (fallback)
<video controls preload="metadata" poster="preview.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<p>Ваш браузер не поддерживает HTML5-видео. <a href="video.mp4">Скачать видео</a></p>
</video>
Субтитры через <track> (a11y)
<video controls>
<source src="lecture.mp4" type="video/mp4">
<track kind="subtitles" src="subtitles-ru.vtt" srclang="ru" label="Русский" default>
<track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">
<track kind="descriptions" src="descriptions.vtt" srclang="ru" label="Описание для незрячих">
</video>
Фоновое видео (без звука)
<video autoplay muted loop playsinline aria-hidden="true">
<source src="bg.webm" type="video/webm">
<source src="bg.mp4" type="video/mp4">
</video>
aria-hidden="true" скрывает декоративное видео от screen readers.
Элемент <audio>
<audio controls preload="metadata">
<source src="podcast.ogg" type="audio/ogg">
<source src="podcast.mp3" type="audio/mpeg">
<p>Ваш браузер не поддерживает аудио. <a href="podcast.mp3">Скачать</a></p>
</audio>
Атрибуты <video> и <audio>
| Атрибут | Назначение |
|---|---|
controls |
Показать нативные элементы управления |
autoplay |
Автовоспроизведение (требует muted в большинстве браузеров) |
muted |
Без звука (необходимо для autoplay) |
loop |
Зациклить воспроизведение |
preload |
none / metadata / auto — стратегия предзагрузки |
poster |
Изображение-превью до воспроизведения (только <video>) |
playsinline |
Воспроизведение в iOS Safari без полноэкранного режима |
Частые ошибки
| Ошибка | Почему плохо | Как правильно |
|---|---|---|
autoplay без muted |
Браузеры блокируют autoplay со звуком | Только autoplay muted |
| Нет субтитров | Недоступно для глухих, нарушает WCAG 1.2 | Добавляй <track kind="subtitles"> |
Нет preload="metadata" |
Браузер скачивает всё видео сразу | Используй preload="metadata" |
| Нет fallback-текста | Старые браузеры показывают пустое место | Добавляй текст внутрь элемента |
| Только один формат | Нет кроссбраузерности | Используй <source> с несколькими форматами |