HTML тег <video>

Элемент <video> (от англ. "video" ‒ «видео») вставляет видео файл в HTML-документ. С его помощью можно воспроизводить видео файлы, а так же устанавливать различные настройки воспроизведения этих файлов (повтор, автовоспроизведение, картинка по умолчанию).

Видео кодеки

Видеокодек — это программа/алгоритм сжатия (т.е. уменьшения размера) видеоданных (видеофайла, видеопотока) и восстановления сжатых данных. Кодек — это файл-формула, которая определяет, каким образом можно «упаковать» видеоконтент и, соответственно, воспроизвести видео.

В настоящее время поддерживается три видео формата — MP4, WEBM, OGG:

MP4/MPEG-4 — самый популярный видео формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. Расширение файла MP4 используется в основном для мультимедийного формата файла MPEG-4. Формат MPEG-4 – это стандарт, разработанный группой экспертов Moving Picture Experts Group (MPEG), как определено в MPEG-4, содержит MPEG-4 закодированный видео и аудио контент в кодировке Advanced Audio Coding (AAC). Обычно используется расширение файла MP4.

WebM — открытый формат мультимедиа, представленный компанией Google. Хранит видео, сжатое при помощи технологии VP8 и аудио, сжатое с помощью компрессии Ogg Vorbis. Часто всего применяется для онлайн-отправки видео с помощью HTML5.

OGG — открытый стандарт формата мультимедиаконтейнера, являющийся основным файловым и потоковым форматом для мультимедиакодеков фонда Xiph.Org, а также название проекта, занимающегося разработкой этого формата и кодеков для него. Как и все технологии, разрабатываемые под эгидой Xiph.Org, формат Ogg является открытым и свободным стандартом, не имеющим патентных или лицензионных ограничений.

MIME-типы для видео форматов

Синтаксис

<video src="URL">...</video>
<video>
  <source src="URL">
</video>

Закрывающий тег

Обязателен.

Атрибуты

autoplayHTML5

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

---

controlsHTML5

Отображает элементы управления воспроизведением, включающие в себя: запуск, паузу, полосу прокрутки, громкость звука, включение полноэкранного режима, титры/субтитры (при наличии) и звуковую дорожку (при наличии).

---

heightHTML5

Задаёт высоту области для воспроизведения видеоролика.

---

loopHTML5

Повторяет воспроизведение видео с начала после его завершения.

---

posterHTML5

Указывает URL-адрес изображения (картинки), которое будет отображаться пока видеофайл загружается или пока пользователь не нажмет кнопку воспроизведения. Если атрибут не установлен, то браузер отображает первый кадр видеоролика.

---

preloadHTML5

Указывает, какие действия должен выполнять браузер, если для видеоплеера не указан атрибут autoplay. При совместном использовании с атрибутом autoplay атрибут preload будет проигнорирован. Он может принимать одно из следующих трех значений:
auto - загрузка видеофайла начнется после загрузки страницы
metadata - сбор информации о видеофайле: размер, первый кадр, список воспроизведения, длительность
none - загрузка видеофайла начнется только после щелчка мыши по кнопке воспроизведение

---

srcHTML5

Указывает URL адрес видео файла.

---

widthHTML5

Задаёт ширину области для воспроизведения видеоролика.

---

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

Элемент <video> является новым в HTML5.

Пример использования:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Ваш браузер не поддерживает элемент video.
</video>

Спецификации