Видео и звук на странице - это не файл, который сам себя проигрывает, а теги <video> и <audio> с набором атрибутов, от которых зависит, покажется ли вообще панель управления и что произойдёт, если браузер не понимает формат файла.
Нажми play у видео и у аудио - оба реально проигрываются прямо в примере. Попробуй убрать controls у любого из них - без атрибута панель управления пропадёт.
Тег video: controls и poster
Тег <video> сам по себе не показывает никакой панели - без атрибута controls нет ни кнопки play, ни громкости, ни перемотки. Атрибут poster задаёт картинку-превью, которая показывается до того, как видео начнёт проигрываться - полезно, если не хочется показывать чёрный экран или первый случайный кадр.
<video controls poster="/images/prevyu.jpg" width="640" height="360"><source src="/video/urok.mp4" type="video/mp4"></video> - панель управления есть, превью тоже.
<video poster="/images/prevyu.jpg" width="640" height="360"><source src="/video/urok.mp4" type="video/mp4"></video> - без controls играть и останавливать видео нечем.
Тег audio
Тег <audio> устроен так же, как video, но без изображения - только звук. Атрибут controls нужен по той же причине: без него не появится ни одной кнопки, и до файла не добраться иначе как через код.
<audio controls><source src="/audio/urok.mp3" type="audio/mpeg"></audio> - панель управления показана, звук можно включить и поставить на паузу.
<audio><source src="/audio/urok.mp3" type="audio/mpeg"></audio> - без controls элемент никак не показан и не управляется.
Несколько source - для разных форматов
Один и тот же ролик можно сохранить в разных форматах - и не каждый браузер понимает каждый формат. Поэтому вместо одного адреса в атрибуте src у video и audio часто перечисляют несколько вложенных тегов <source> с разными файлами: браузер сам проверяет их по порядку и использует первый, который умеет воспроизвести.
<video controls><source src="/video/urok.webm" type="video/webm"><source src="/video/urok.mp4" type="video/mp4"></video> - если браузер не поддерживает webm, он попробует mp4.
<video controls src="/video/urok.webm"></video> - только один формат: в браузере без поддержки webm видео просто не запустится, и запасного варианта нет.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Забывать атрибут controls | Нет ни одной кнопки - управлять проигрыванием нечем | Указывать controls всегда, если плеер должен быть управляемым |
| Рассчитывать на автовоспроизведение со звуком | Современные браузеры блокируют автовоспроизведение со звуком без действия пользователя на сайте | Использовать autoplay вместе с muted, если автозапуск действительно нужен |
| Указывать только один source | В браузере без поддержки этого формата ничего не воспроизведётся, запасного варианта нет | Добавлять несколько source с разными форматами - браузер выберет подходящий |
| Задавать src прямо у video или audio вместо source, когда нужно несколько форматов | У video/audio можно указать только один src - для нескольких форматов места нет | Использовать вложенные теги source для каждого варианта формата |
Шпаргалка
| Термин | Значение |
|---|---|
| video | Тег для показа видео |
| audio | Тег для звука без изображения |
| controls | Показывает панель управления - play, пауза, громкость |
| poster | Картинка-превью для video до начала проигрывания |
| source (несколько) | Разные форматы одного файла - браузер выбирает первый поддерживаемый |
Коротко: отвечаем на вопросы
Что делает атрибут controls и почему без него плеер не работает?
controls добавляет панель управления: play, пауза, громкость, перемотку. Без этого атрибута ни video, ни audio не показывают ни одной кнопки - управлять проигрыванием можно только через код, обычному читателю страницы такой плеер бесполезен.
Почему видео с автовоспроизведением иногда проигрывается без звука?
Современные браузеры блокируют автовоспроизведение со звуком, пока человек не провзаимодействовал с сайтом - это защита от навязчивых автоплеев. Автовоспроизведение с приглушённым звуком (атрибут muted) разрешено всегда, поэтому сайты часто запускают видео без звука и дают отдельную кнопку «включить звук».
Зачем нужно несколько тегов source вместо одного src?
Единого обязательного формата видео для HTML5 не существует - в 2009 году не удалось договориться из-за лицензий и патентных рисков разных форматов. Поэтому файл сохраняют в нескольких форматах и перечисляют их через source: браузер сам выбирает первый, который умеет воспроизвести.
