Теги audio и video — звук и видео на странице

Справочник · HTML и CSS · 1 минута чтения

Звук вставляется тегом <audio>, видео — тегом <video>. Атрибут controls показывает кнопки: запуск, пауза, громкость, перемотка. Без него плеера на странице не видно.

HTML

<audio controls src="music/song.mp3">
  Браузер не умеет проигрывать звук.
</audio>

<video controls width="640" poster="video/cover.jpg" src="video/clip.mp4">
  Браузер не умеет показывать видео.
</video>

Текст внутри тега видит только браузер, который этих тегов не знает. Путь в src пишется так же, как у картинок, — подробнее в уроке Картинки и пути к файлам.

Атрибуты

Атрибут	Что делает
`controls`	показать кнопки плеера
`autoplay`	начать сразу после загрузки страницы (см. ниже)
`muted`	без звука
`loop`	повторять по кругу
`preload`	что загрузить заранее: `none` — ничего, `metadata` — длительность и размеры, `auto` — на усмотрение браузера
`poster`	картинка до запуска видео (только у `video`)
`width`, `height`	размер видео в точках (только у `video`)
`playsinline`	на iPhone играть в странице, а не во весь экран (только у `video`)

Несколько форматов: source

Вместо src можно перечислить файлы тегами <source> — браузер возьмёт первый, который умеет показать:

HTML

<video controls width="640" poster="video/cover.jpg">
  <source src="video/clip.webm" type="video/webm">
  <source src="video/clip.mp4" type="video/mp4">
  Браузер не умеет показывать видео.
</video>

Самые совместимые форматы: для звука — MP3, для видео — MP4 (видео H.264, звук AAC). Файлы AVI, WMV и MKV браузеры надёжно не показывают — их переводят в MP4 программой-конвертером.

Субтитры: track

Субтитры лежат в отдельном текстовом файле формата WebVTT (.vtt) и подключаются тегом <track>:

HTML

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

Автозапуск

Браузеры не дают странице самой включить звук: видео с autoplay запустится, только если у него ещё и muted. Так делают фоновое видео:

HTML

<video autoplay muted loop playsinline src="video/background.mp4"></video>

Звук пусть включает сам посетитель кнопкой плеера: неожиданная музыка — частая причина сразу закрыть сайт.

Видео под ширину экрана

Чтобы видео не вылезало за край на телефоне, ему задают в CSS:

CSS

video {
  max-width: 100%;
  height: auto;
}

Видео с YouTube и похожих сервисов вставляют не тегом <video>, а кодом, который даёт сам сервис (кнопка «Поделиться» → «Встроить»).

Если не работает

Плеер серый, ничего не играет — неверный путь к файлу или формат, который браузер не понимает. Откройте адрес файла прямо в браузере: если и так не играет, дело в файле.
Не запускается автоматически — нет muted (браузер запрещает автозапуск со звуком).
На сайте не работает, а на компьютере работает — проверьте регистр букв в имени файла: на сервере Clip.mp4 и clip.mp4 — разные файлы.

Полный список тегов — в справке Справочник тегов HTML.