Примечание: тег video не будет работать в IE8 и более ранних версиях.

С помощью тега video можно вставить видеоконтент на страницу. Однако, некоторые браузеры не поддерживают все форматы видео, поэтому важно предоставить файл в нескольких вариантах – для этого применяются вложенные теги source, которые размещаются внутри элемента video.

Любой текст, помещённый внутрь video, отобразится браузером в тех случаях, когда сам элемент или выбранный формат отсутствует.

Примечание: атрибуты controls, autoplay и loop – булевые. Если они присутствуют, функция включена; если нет – отключена.

autoplay:

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

video autoplayvideo autoplay="autoplay"video autoplay=""

controls:

Показывает панель управления (play/pause, скроллер, громкость, полноэкран, субтитры и т.д.). Возможные записи:

video controlsvideo controls="controls"video controls=""

height:

Задаёт высоту плеера в пикселях (пример: height="200").

loop:

Включает бесконечный цикл воспроизведения. Записи:

video loopvideo loop="loop"video loop=""

muted:

Запускает видео без звука по умолчанию; пользователь может включить звук позже. Синтаксис:

video mutedvideo muted="muted"video muted=""

Примечание: атрибут muted не работает в IE9 и ниже.

poster:

Указывает URL изображения, которое будет показываться до начала воспроизведения. Если его нет – браузер берёт первый кадр видео.

preload:

Определяет поведение загрузки при отсутствии autoplay. При совместном использовании с autoplay значение игнорируется. Возможные варианты:

• auto - файл загружается сразу после загрузки страницы;
• metadata - собирается только информация о видео (размер, длительность и т.д.);
• none - загрузка начинается по клику на кнопку воспроизведения.

Примечание: preload не поддерживается в Internet Explorer.

src:

Определяет путь к видеофайлу (может быть абсолютным или относительным).

width:

Устанавливает ширину плеера в пикселях (пример: width="200").

Тег video также поддерживает вложенные теги source.

video width="400" height="257" controls poster="video/duel.jpg" source src="movie.ogg" type="video/ogg" Ваш браузер не поддерживает тег video.