HTML5 Видео

HTML Видео пример. Взято из Big Buck Bunny.

Воспроизведение видео в HTML

До появления спецификации HTML5 видео можно было воспроизвести лишь в веб-браузере с плагином (например, flash).

HTML5 элемент <video> указывает стандартный способ встраивания видео в веб-страницу.

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

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

Элемент
<video>	4.0	9.0	3.5	4.0	10.5

HTML элемент <video>

Чтобы показать видео в HTML, используйте элемент <video>:

Пример

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

Попробуйте сами »

Как это работает

Атрибут controls добавляет элементы управления видео, такие как воспроизведение, приостановка и уровень звука.

Рекомендуется всегда включать атрибуты width и height. Если height (высота) и width (ширина) не заданы, страница может мерцать при проигрывании видео.

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

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

HTML <video> Autoplay

Чтобы проигрывание видео начиналось автоматически, используйте атрибут autoplay:

Example

<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает тег video.
</video>

Попробуйте сами »

Атрибут autoplay не работает на мобильных устройствах, таких как iPad и iPhone.

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

В HTML5 есть три поддерживаемых видеоформата: MP4, WebM и Ogg.

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

Браузер	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (from Opera 25)	YES	YES

HTML Видео - Типы Медиа

Формат файла	Тип медиа
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML видео - методы, свойства и события

HTML5 определяет методы, свойства и события DOM для элемента <video>.

Это позволяет загружать, воспроизводить и приостанавливать видео, а также устанавливать продолжительность и громкость.

Есть также события DOM, которые могут сообщать вам, когда видео начинает воспроизводиться, приостанавливаться и т.д.

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

Видео взято из Big Buck Bunny.

Попробуйте сами »

Для полной DOM справки, перейдите на HTML5 Аудио/Видео DOM Справочник на нашем сайте W3Schools на русском.