HTML5 Видео

Многие веб-сайты используют видео. HTML5 предоставляет стандарт для отображения видео.

Видео на веб-страницах

До сих пор не существовало стандарта для отображения видео на веб-страницах.

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

HTML5 определяет стандартный способ включения видео с помощью элемента video.

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

Internet Explorer 9+, Firefox, Opera, Chrome и Safari поддерживают элемент <video>.

Примечание:Internet Explorer 8 или более ранние версии IE не поддерживают элемент <video>.

HTML5 Видео - как это работает

Чтобы отобразить видео в HTML5, всё, что вам нужно, это:

Элемент <video> предоставляет элементы управления воспроизведением, паузой и громкостью для управления видео.

Элемент <video> также предоставляет атрибуты width и height для управления размером видео. Если высота и ширина заданы, необходимое пространство для видео будет зарезервировано при загрузке страницы. Если эти атрибуты не заданы, браузер не знает размер видео, поэтому не может зарезервировать определённое пространство во время загрузки, и страница будет изменяться в соответствии с исходным размером видео.

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

Элемент <video> поддерживает несколько элементов <source>. Элемент <source> может ссылаться на разные видеофайлы. Браузер будет использовать первый распознанный формат:

Видеоформаты и поддержка браузеров

В настоящее время элемент <video> поддерживает три видеоформата: MP4, WebM и Ogg:

• MP4 = файлы MPEG 4 с кодированием видео H.264 и кодированием аудио AAC
• WebM = файлы WebM с кодированием видео VP8 и кодированием аудио Vorbis
• Ogg = файлы Ogg с кодированием видео Theora и кодированием аудио Vorbis

Видеоформат

HTML5 <video> — управление с помощью DOM

Элементы HTML5 <video> и <audio> также имеют методы, свойства и события.

Методами, свойствами и событиями элементов <video> и <audio> можно управлять с помощью JavaScript.

Методы используются для воспроизведения, приостановки, загрузки и т. д. Свойства (такие как duration, volume и т. д.) можно читать или задавать. События DOM могут уведомлять вас, например, когда элемент <video> начинает воспроизведение, приостанавливается, останавливается и т. д.

Простые методы в примере демонстрируют, как использовать элемент <video>, читать и задавать свойства и вызывать методы.

Для получения дополнительной информации см.Справочное руководство по HTML5 Audio/Video DOM。

Теги видео HTML5