HTML тег <video>

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

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

Видео кодеки

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

В настоящее время поддерживается три видео формата — 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 является открытым и свободным стандартом, не имеющим патентных или лицензионных ограничений.

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


Формат
MP4 Да Да Да Да Да Да
WebM Да Да Да Да
Ogg Да Да Да Да

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

Формат MIME-тип
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Синтаксис

<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.

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

Пример HTML:

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

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

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

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



Contema