HTML тег <video>

Значение и применение

Тег <video> добавляет видео контент на страницу. Раньше в браузерах не было встроенных возможностей для поддержки аудио и видео контента, но с развитием интернет, поддержка мультимедийных элементов в качестве возможностей современных браузеров стала необходимостью. В HTML 5 были введены новые элементы <video> и <audio>. Элементы поддерживаются во всех современных браузерах.

Видеофайл содержит контейнер и дорожки, закодированные определёнными кодеками. Например, MP4 может содержать H.264 и AAC, а WebM — VP9 и Opus. Само расширение не гарантирует воспроизведение.

Поддержка воспроизведения зависит от сочетания контейнера, кодеков, версии браузера и системы, а не только расширения файла. Проверяйте реальные файлы в целевых браузерах; несколько вариантов можно предложить через <source> с точными MIME-типами.


  • MP4 с H.264 и AAC часто используют как основной вариант.
  • WebM допускает разные сочетания видео- и аудиокодеков; его можно предложить альтернативным источником.
  • Ogg с Theora — исторический вариант; не рассчитывайте на него как на единственный источник для современных браузеров.

Текст внутри элемента — замена для браузера без поддержки самого элемента, а не сообщение об ошибке загрузки файла. Полезную ссылку на файл и текстовую расшифровку размещайте также рядом. Для видео подключайте субтитры <track>; сохраняйте доступные элементы управления.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (5) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьhtml.elements.video
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
video✓3✓12✓3.5✓10.5✓3.1✓18✓4✓14✓3✓1.0✓4.4✓3
Aspect ratio computed from width and height attributes✓79✓79✓71✓66✓14✓79✓79✓57✓14✓12.0✓79✓14
autoplay✓3✓12✓3.5✓10.5✓3.1✓18✓4✓14✓10✓1.0✓4.4✓10
Autoplay requires muted attribute or no audio track✓67✓79✓67✓54✓16✓67✓91✓48✓10✓9.0✓67✓10
controls✓3✓12✓3.5✓10.5✓3.1✓18✓4✓14✓3✓1.0✓4.4✓3
controlslist✓58✓79×✓45×✓58×✓43×✓7.0✓58×
crossorigin✓33✓≤18✓74✓20✓10✓33✓79✓20✓10✓2.0✓4.4.3✓10
disablepictureinpicture✓69✓79◐122✓56✓13.1✓105◐122✓72✓13.4✓20.0×✓13.4
disableremoteplayback✓121✓121×✓107✓13.1✓56×✓43✓13✓6.0×✓13
height✓3✓12✓3.5✓10.5✓3.1✓18✓4✓14✓3✓1.0✓4.4✓3
loading✓150✓150×✓134×✓150×✓101××✓150×
loop✓3✓12✓11✓10.5✓3.1✓18✓14✓14✓6✓1.0✓4.4✓6
muted✓30✓12✓11✓17✓5✓30✓14✓18✓4.2✓2.0✓4.4✓4.2
playsinline✓75✓79×✓62✓10✓75×✓54✓10✓11.0✓75✓10
poster✓3✓12✓3.6✓10.5✓3.1✓18✓4✓14✓3✓1.0✓4.4✓3
preload✓3✓12✓4✓15✓3.1✓18✓4✓14✓3✓1.0✓4.4✓3
src✓3✓12✓3.5✓10.5✓3.1✓18✓4✓14✓3✓1.0✓4.4✓3
width✓3✓12✓3.5✓10.5✓3.1✓18✓4✓14✓3✓1.0✓4.4✓3

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут Значение Описание
autoplay autoplay Запрашивает автоматический запуск, но браузер может его заблокировать, особенно со звуком. Наличие атрибута, включая autoplay="false", включает запрос автозапуска.
controls controls Отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения/паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
height pixels Устанавливает высоту видео проигрывателя.
loop loop Зацикливает воспроизведение файла (наша песня хороша – начинай сначала).
muted muted Указывает, что видео будет заглушено (без звука).
poster URL Задает изображение, которое отображается в то время пока видео загружается, или пока пользователь не нажмет кнопку воспроизведения.
preload auto
metadata
none 		Подсказка загрузки: none — не загружать заранее, metadata — метаданные, auto — допускается загрузка файла. Браузер вправе не следовать подсказке; автозапуск требует загрузки.
src URL Указывает URL адрес видео файла.
width pixels Устанавливает ширину видео проигрывателя.
playsinline Логический атрибут Просит воспроизводить видео внутри страницы, без обязательного перехода в полноэкранный режим.
crossorigin anonymous | use-credentials Задаёт режим CORS-загрузки. Для чужого источника нужны разрешающие заголовки сервера.
loading eager | lazy Новая возможность стандарта: обычная или отложенная загрузка медиа. Поддержка ограничена; не заменяет preload и не гарантирует автозапуск.

Примеры, попробуйте сами

Запустите локальное видео и выберите дорожку субтитров. Для своего документа сохраните видео и файлы субтитров рядом с HTML.

HTML
<video controls width="320" height="240"><source src="sample.mp4" type="video/mp4"><track src="ru.vtt" kind="subtitles" srclang="ru" label="Русский" default><track src="en.vtt" kind="subtitles" srclang="en" label="English">Ваш браузер не поддерживает video.</video>

Видео · Русские субтитры · Английские субтитры

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".