Аудио и видео
Раньше для видео на сайте нужны были сторонние плагины. Сейчас браузер проигрывает звук и видео сам: достаточно тегов <video> и <audio>. В примерах путь к файлу вроде /media/flower.webm ведёт к ролику, который лежит на этом сайте; на своей странице укажите путь к своему файлу.
Видео
Тег <video> показывает видеофайл, адрес указывают в src. Атрибут controls добавляет панель управления — кнопку запуска, громкость, полосу прокрутки:
<video src="/media/flower.webm" controls width="320"></video>Без controls видео остановится на первом кадре, и запустить его будет нечем. width задаёт ширину, высота подстроится по пропорциям ролика.
Настройки воспроизведения
| Атрибут | Что делает |
|---|---|
controls | Показывает панель управления |
autoplay | Запускает видео сразу после загрузки |
muted | Выключает звук |
loop | Повторяет ролик по кругу |
poster | Картинка, которая видна до запуска |
playsinline | На телефоне играет в странице, а не на весь экран |
<video src="/media/flower.webm"
autoplay muted loop playsinline width="320"></video>Такой беззвучный зацикленный ролик часто ставят фоном на первый экран сайта.
Несколько форматов
Не каждый браузер понимает любой формат видео. Вместо src внутрь <video> кладут несколько тегов <source> — браузер возьмёт первый, который сможет проиграть:
<video controls width="320">
<source src="/media/flower.webm" type="video/webm">
<source src="/media/flower.mp4" type="video/mp4">
Ваш браузер не умеет показывать видео.
</video>Атрибут type сообщает формат заранее, чтобы браузер не скачивал лишнее. Текст в конце увидят только в очень старых браузерах.
Аудио
<audio> устроен так же, как <video>, только без картинки. Без controls плеер не виден совсем:
<audio src="/media/t-rex-roar.mp3" controls></audio>Для звука подходят форматы MP3, AAC и Ogg; MP3 понимают все браузеры.
Субтитры
Тег <track> подключает субтитры — текстовый файл в формате WebVTT с репликами и временем их показа:
<video controls width="320">
<source src="/media/flower.mp4" type="video/mp4">
<track src="flower-ru.vtt" kind="subtitles" srclang="ru" label="Русский">
</video>Файла субтитров у этого примера нет, но так их подключают. Субтитры нужны людям с нарушением слуха и тем, кто смотрит без звука, например в транспорте.
Частая ошибка
Атрибут autoplay без muted обычно не работает: браузеры запрещают сайтам самим включать звук, пока пользователь ничего не нажал. Видео просто не запустится. Если ролик должен стартовать сам, делайте его беззвучным — autoplay muted — и оставляйте controls, чтобы звук можно было включить.