HTML · медиа

Видео и аудио на странице

Для собственных медиофайлов HTML предлагает теги <video> и <audio>. Браузер показывает стандартные кнопки, а пользователь может запустить, остановить и изменить громкость.

Добавляем видео

<video controls width="720" poster="cover.jpg" preload="metadata">
  <source src="lesson.webm" type="video/webm">
  <source src="lesson.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>

Браузер проверяет источники по порядку и выбирает поддерживаемый формат. Текст внутри элемента служит запасным сообщением.

Полезные атрибуты

• controls показывает стандартное управление.
• poster задаёт обложку до запуска.
• preload="metadata" заранее получает только основные сведения о файле.
• muted отключает звук.
• loop повторяет воспроизведение.

Автоматическое воспроизведение со звуком часто блокируется браузером и раздражает посетителей. Если фоновое видео действительно необходимо, используй autoplay muted playsinline и оставь возможность его остановить.

Добавляем аудио

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

Для подкаста или лекции полезно рядом разместить название, длительность и текстовую расшифровку. Так материал останется доступным, даже если звук нельзя включить.

Субтитры

<video controls>
  <source src="lesson.mp4" type="video/mp4">
  <track src="subtitles-ru.vtt"
         kind="subtitles" srclang="ru" label="Русский" default>
</video>

Файл WebVTT содержит временные метки и текст реплик. Субтитры нужны не только людям с нарушением слуха: видео часто смотрят без звука.

Адаптивный размер

video,
audio {
  display: block;
  max-width: 100%;
}

Не заставляй видео выходить за ширину экрана. Для аудио обычно достаточно ширины контейнера.

Плеер браузера против встроенного ролика

Свой файл подключают через video или audio. Ролик с другого сайта чаще вставляют их готовым плеером через отдельный код вставки. Свой файл проще контролировать: можно задать обложку, субтитры и запасной текст. Чужой плеер проще встроить, но он тянет чужие скрипты и может исчезнуть, если изменится адрес.

Атрибут controls показывает кнопки. Без него человек не сможет запустить ролик, если ты отдельно не написал свою кнопку. autoplay лучше не включать: браузеры его ограничивают, а неожиданный звук мешает.

<video controls poster="/images/lesson-cover.jpg" width="800" height="450">
  <source src="/video/form.mp4" type="video/mp4">
  <track kind="subtitles" src="/video/form.ru.vtt" srclang="ru" label="Русские" default>
  <p>Видео не открылось. <a href="/html/formy/">Прочитай урок текстом</a>.</p>
</video>

Запасной путь, если файл не открылся

Текст внутри video виден только старым или ограниченным браузерам. Всё равно оставь рядом обычную ссылку на конспект: ролик может не загрузиться из-за сети, а содержание урока должно остаться доступным. Субтитры полезны не только людям без звука. С ними урок можно смотреть в транспорте и быстрее находить нужное место.

Несколько source перечисляют один и тот же ролик в разных форматах. Браузер выбирает первый подходящий. Для современной страницы обычно хватает MP4 для видео и MP3 для звука, если не нужно поддерживать совсем старые устройства.

Вес и поведение на телефоне

• Не ставь ролик на всю ширину макета, если он снят вертикально для телефона.
• preload="none" не скачивает файл, пока человек не нажал play.
• Обложка poster показывает тему ролика до запуска.
• Длинное видео разбей на главы в тексте под плеером, а не только внутри файла.

Что дальше

Посмотри, как работает тег img, и повтори семантическую структуру страницы.