HTML-тег `<video>`

Тег <video> является одним из элементов HTML5. Он используется для встраивания видео в HTML-документ. Браузеры поддерживают не все одинаковые форматы видео, поэтому для корректного отображения следует указывать несколько форматов. Путь к видеофайлу указывается внутри тега <source> или в атрибуте src.

В тег <video> также можно добавить альтернативный текст, который отобразится, если браузер не поддерживает указанный формат видео.

Для элемента <video> поддерживаются 3 формата видео: MP4/MPEG 4, WebM и Ogg. Для сжатия и распаковки больших видеофайлов используются специальные программы — кодеки.

Файлы MP4/MPEG 4 используют видеокодек H264 и аудиокодек AAC, файлы WebM — видеокодеки VP8 или VP9 и аудиокодеки Vorbis или Opus, а файлы Ogg — видеокодек Theora и аудиокодек Vorbis.

Для управления видеоконтентом и/или аудиоконтентом можно использовать различные события. Такие события позволяют отслеживать прогресс загрузки и воспроизведения медиафайлов, а также позицию и состояние воспроизведения.

Чтобы изменить положение видео внутри рамки элемента, можно использовать свойство CSS object-position. Если нужно контролировать, как размер видео изменяется для вписывания в рамку, используйте свойство object-fit.

Вы можете добавить субтитры к вашему видео с помощью JavaScript, элемента <track> и формата WebVTT. Также с помощью тега <video> можно воспроизводить аудиофайлы, что может быть полезно в некоторых случаях.

Элемент <video> является заменённым элементом со значением display: block по умолчанию. Стилизация обычно выполняется через width/height или CSS-свойства, такие как object-fit и object-position.

Синтаксис

Тег <video> является парным. Содержимое записывается между открывающим (<video>) и закрывающим (</video>) тегами.

Пример HTML-тега `<video>` с атрибутами controls, muted и src:

Пример HTML-тега <video>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video{
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="https://ru.w3docs.com/build/videos/arcnet.io(7-sec).mp4" playsinline>
      <track default kind="subtitles" srclang="en" src="https://ru.w3docs.com/build/videos/arcnet.io(7-sec).vtt"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Try it Yourself »

Пример HTML-тега `<video>` с атрибутом controls:

Как используется HTML-тег <video>?

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls playsinline>
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
      <source src="https://ru.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>

Try it Yourself »

TIP

Атрибуты controls, autoplay и loop являются булевыми атрибутами и не принимают значений. Если они указаны, они по умолчанию активны.

Атрибуты

Атрибут	Значение	Описание
autoplay	autoplay	Указывает, что видео начнёт воспроизводиться автоматически, как только будет готово.
controls	controls	Отображает элементы управления, позволяющие пользователю управлять воспроизведением видео, включая громкость, перемотку и паузу/продолжение воспроизведения.
height	pixels	Устанавливает высоту видеоплеера.
loop	loop	Указывает, что видео начнётся заново каждый раз после завершения воспроизведения.
muted	muted	Указывает, что видео изначально будет без звука.
poster	URL	Устанавливает изображение, которое будет отображаться во время загрузки видео или до нажатия пользователем кнопки воспроизведения.
preload	auto, metadata, none	Подсказывает браузеру, какой контент загружать перед воспроизведением видео: `<br>` auto: Весь файл видео может быть загружен. `<br>` metadata: Загружаются метаданные видео (например, длительность). `<br>` none: Видео не должно предварительно загружаться. `<br>` Примечание: Атрибут игнорируется, если включён autoplay.
src	URL	Устанавливает URL встроенного видео. Вместо этого можно использовать элемент `<source>` для указания видео для встраивания.
width	pixels	Устанавливает ширину плеера.

Тег <video> поддерживает Глобальные атрибуты и Атрибуты событий.

Практика

Для чего можно использовать HTML-тег <video>?

Для встраивания видео в HTML-документыДля встраивания живой ссылки в HTML-документыДля размещения аудиоклипа в HTML-документеПозволяет управлять видео, например, воспроизведением, паузой и громкостьюИспользуется для вставки изображений в HTML-документ

HTML-тег <video> ​

Синтаксис ​

Пример HTML-тега <video> с атрибутами controls, muted и src: ​

Пример HTML-тега <video> с атрибутом controls: ​