HTML - тег <video> является одним из элементов HTML5. Он используется для встраивания видео в HTML-документ. Не все браузеры поддерживают одни и те же видеоформаты, поэтому для корректного рендеринга необходимо предоставить несколько видеоформатов.
Тег <video> - синтаксис и код
Тег <video> представлен парами. Содержимое записывается между открывающим (<video>) и закрывающим (</video>) тегами.
Пример кода для воспроизведения видео файла:
<video width="320" height="240" controls>
<source src="/htm/video/eagle.mp4" type="video/mp4">
<source src="/htm/video/eagle.ogv" type="video/ogg">
Ваш браузер не поддерживает видео элементы.
</video>
Элемент video
Определение и использование
HTML - тег <video> используется для встраивания видеоконтента в документ, например, в видеоролик или другие видеопотоки;
Тег <video> содержит один или несколько тегов <source> с разными источниками видео. Браузер выберет первый поддерживаемый им источник.
Для элемента <video> поддерживаются три видеоформата: MP4/MPEG 4, WebM и Ogg. Для сжатия/распаковки больших видеофайлов используются специальные программы – кодеки.
Файлы MP4/MPEG 4 используются с видеокодеками H264 и аудиокодеками AAC, файлы WebM — с видеокодеками VP8 и аудиокодеками Vorbis; и файлы Ogg — с видеокодеком Theora и аудиокодеком Vorbis.
Чтобы изменить расположение видео в кадре элемента, можно применить свойство CSS object-position. Если вы хотите контролировать изменение размера видео в соответствии с размером кадра, тогда поможет свойство object-fit.
Субтитры/подписи к своему видео можно добавить с помощью JavaScript с элементом <track> и в формате WebVTT. Также можно воспроизводить аудиофайлы с помощью <video>, что может быть полезно в некоторых случаях.
✪ Рекомендация: для стилизации <video> используйте свойство CSS display.
★ Примечание: текст между тегами <video> и </video> будет отображаться только в браузерах, которые не поддерживают элемент <video>.
Видеоформат и поддержка браузерами
Браузер
MP3
WAV
OGG
Edge / IE
Да
Да
Да
Chrome
Да
Да
Да
Firefox
Да
Да
Да
Яндекс браузер
Да
Да
Да
Safari
Да
Да
Нет
Opera
Да
Да
Да
Поддержка <video> браузерами
✅ Поддерживает
✅ Поддерживает
✅ Поддерживает
✅ Поддерживает
✅ Поддерживает
Атрибуты
Атрибут
Значение
Описание
autoplay
autoplay
Указывает, что видео начнет воспроизводиться, как только оно будет готово
controls
controls
Указывает, что должны отображаться элементы управления видео (например, кнопка воспроизведения/паузы и т. д.)
height
pixels
Устанавливает высоту видеоплеера
loop
loop
Указывает, что видео будет начинаться заново каждый раз, когда оно закончится
muted
muted
Указывает, что аудиовыход видео должен быть отключен
poster
URL
Указывает изображение, которое будет отображаться во время загрузки видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения
preload
auto
metadata
none
Указывает, считает ли автор, что видео должно загружаться при загрузке страницы
