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

Путь к файлу задаётся с помощью атрибута src или вложенного элемента <source>. Элемент <video> может содержать в себе сразу несколько элементов <source>, каждый из которых задает вариации одного и того же видео с различными версиями кодеков.

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

На данный момент существует 3 формата видео: MP4/MPEG-4, OGG и WebM +. Для сжатия видеоданных и их восстановления используются специальные программы, видеокодеки. Кодек - это файл-формула, определяющая способ “упаковки” видеоконтента и его воспроизведения.

Для видео файла формата MPEG-4 используются видео кодек Н.264 и аудио кодек ААС. Для использования кодеков необходимо получить лицензию.

Для видео файла Ogg используются видео кодек Theora и аудио кодек Vorbis с открытым кодом.

Для видео файлов в формате WebM + используются видео кодек VP8 и аудио кодек Vorbis. Для их использования не требуется лицензии.

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      video {
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4"/>
    </video>
    <p>Некоторая информация о видео</p>
  </body>
</html>

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      video {
      width: 300px; 
      height: 220px;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
      <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p>Некоторая информация о видео</p>
  </body>
</html>
Атрибуты controls, autoplay и loop можно использовать без значения, если атрибут указан, значит данная функция включена, если не указан значит функция выключена.

Атрибуты

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

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

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

chrome firefox safari opera
4+ 3.5+ 4+ 10.5+

Практикуйте свои знания

Какие атрибуты используются с HTML тегом <video>?
Считаете ли это полезным?