HTML тег <video>

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

Описание

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

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

Примечание: атрибутам controls, autoplay и loop при использовании не обязательно должны быть присвоены значения, эти атрибуты являются атрибутами булева типа, то есть если атрибут указан, то данная функция считается включенной, если не указан - выключенной.

Атрибуты

autoplay:

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

<video autoplay>
<video autoplay="autoplay">
<video autoplay="">

Пример »

controls:

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

<video controls>
<video controls="controls">
<video controls="">

Пример »

height:

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

loop:

Указывает, что воспроизведение будет начинаться сначала, каждый раз, после завершения (повтор воспроизведения). Значения для логического атрибута loop можно задавать следующими способами:

<video loop>
<video loop="loop">
<video loop="">

Пример »

muted:

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

<video muted>
<video muted="muted">
<video muted="">

Пример »

Примечание: атрибут muted не поддерживается в IE9 и более ранних версиях.

poster:

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

preload:

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

• auto - загрузка видеофайла начнется после загрузки страницы
• metadata - сбор информации о видеофайле: размер, первый кадр, список воспроизведения, длительность
• none - загрузка видеофайла начнется только после щелчка мыши по кнопке воспроизведение

Пример »

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

src:

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

width:

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

Тег <video> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример

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

Результат данного примера в окне браузера: