Раньше для видео на сайте использовали флеш-плееры или встроенные виджеты сторонних сервисов, и это было не всегда удобно и совсем не всегда быстро. Сегодня у HTML есть собственные теги video и audio, которые работают без дополнительных плагинов практически в любом браузере.
У тега video есть привычный набор атрибутов: controls показывает панель управления, autoplay запускает воспроизведение автоматически, loop зацикливает ролик, muted отключает звук. Автовоспроизведение со звуком современные браузеры блокируют по умолчанию — и это осознанное решение в пользу пользователя, а не баг.
Внутрь video и audio можно добавить несколько тегов source с разными форматами файла — так браузер выберет тот, который поддерживает. Это подстраховка на случай, если один из форматов по какой-то причине не воспроизводится в конкретном браузере.
Не стоит забывать и про текстовую альтернативу — между открывающим и закрывающим тегом video можно оставить текст, который покажется, если браузер вообще не поддерживает этот тег. Для доступности видео дополнительно применяют субтитры через тег track.
Разбор всех атрибутов и практические примеры верстки видеоплеера без сторонних библиотек можно найти в статье про тег video на MDN.
Полезный, но часто забываемый атрибут — poster у video, он задаёт картинку-заглушку, которая показывается до начала воспроизведения. Без него браузер обычно показывает первый кадр или просто чёрный прямоугольник, что выглядит неаккуратно на фоне остального дизайна страницы.
Стоит помнить и о весе видеофайлов — даже короткий ролик легко перевешивает все остальные ресурсы страницы вместе взятые. Для фоновых декоративных видео часто разумнее использовать короткий зацикленный ролик в сжатом формате, чем полноразмерный файл в высоком качестве.
