Пример по добавлению видео

Мультимедийные форматы

На сегодняшний день существует множество мультимедиа форматов для кодирования видео файлов. Браузеры различных производителей могут поддерживать одни из них и не поддерживать другие. Поэтому ознакомьтесь с ниже приведенной таблицей, в которой приведен список из форматов и браузеров, а также связь между ними.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
<video>: WebM, VP8, Vorbis	(Yes)	4.0 (2.0)	9.0 (must be installed separately, e.g. WebM MF)	10.60	3.1 (must be installed separately, e.g. Perian)
<video>: Ogg, Theora, Vorbis	(Yes)	3.5 (1.9.1)	Not supported	10.50	3.1 (must be installed separately, e.g.XiphQT)
<video>: MPEG 4, H.264, MP3	(Yes) (Not in Chromium)	Not supported (coming soon, if third-party decoder is installed)	9.0	Not supported	3.1
<video>: MPEG 4, H.264, AAC	(Yes) (Not in Chromium)	Not supported (coming soon, if third-party decoder is installed)	9.0	Not supported	3.1

Рис. 1. Таблица популярных форматов. Данные взяты с официального сайта Mozilla

Вставка видео файла

Чтобы добавить видео на веб-страницу воспользуйтесь парным тегом <video>. Стоит отметить, что все описанное выше для тега <audio>, справедливо и для тега <video>, он имеет те же атрибуты, но плюс к ним добавляются еще несколько новых:

· SRC – значение атрибута содержит путь к воспроизводимому файлу;

· AUTOPLAY – наличие атрибута позволяет автоматически воспроизводить видео файл;

· AUTOBUFFER – атрибут для автоматической буферизации видео файла;

· CONTROLS – выводит панель для управления воспроизведением видео файла;

· TYPE – MIME формат видео файла;

· POSTER – значение атрибута содержит путь к графическому файлу, который будет служить в качестве заставки в панели просмотра видео. Если атрибут не указан, то браузер отобразит первый кадр видео, либо темный экран;

· WIDTH, HEIGHT – атрибут содержит размеры блока в котором отображается видео в “px”;

· LOOP – атрибут зацикливания воспроизведения видео;

 

Пример по добавлению видео

	<video width="300px" controls>
	<source src="video.mp4" type="video/mp4" />
	<source src="video.ogg" type="video/ogg" />
	Ваш браузер не поддерживает HTML5, обновите его до последней версии.
	</video>

Рис 4. Внешний вид видео проигрывателя реализованного с помощью HTML5

Мультимедийные форматы

На сегодняшний день существует множество мультимедиа форматов для кодирования видео файлов. Браузеры различных производителей могут поддерживать одни из них и не поддерживать другие. Поэтому ознакомьтесь с ниже приведенной таблицей, в которой приведен список из форматов и браузеров, а также связь между ними.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
<video>: WebM, VP8, Vorbis	(Yes)	4.0 (2.0)	9.0 (must be installed separately, e.g. WebM MF)	10.60	3.1 (must be installed separately, e.g. Perian)
<video>: Ogg, Theora, Vorbis	(Yes)	3.5 (1.9.1)	Not supported	10.50	3.1 (must be installed separately, e.g.XiphQT)
<video>: MPEG 4, H.264, MP3	(Yes) (Not in Chromium)	Not supported (coming soon, if third-party decoder is installed)	9.0	Not supported	3.1
<video>: MPEG 4, H.264, AAC	(Yes) (Not in Chromium)	Not supported (coming soon, if third-party decoder is installed)	9.0	Not supported	3.1

Рис. 1. Таблица популярных форматов. Данные взяты с официального сайта Mozilla

Вставка видео файла

Чтобы добавить видео на веб-страницу воспользуйтесь парным тегом <video>. Стоит отметить, что все описанное выше для тега <audio>, справедливо и для тега <video>, он имеет те же атрибуты, но плюс к ним добавляются еще несколько новых:

· SRC – значение атрибута содержит путь к воспроизводимому файлу;

· AUTOPLAY – наличие атрибута позволяет автоматически воспроизводить видео файл;

· AUTOBUFFER – атрибут для автоматической буферизации видео файла;

· CONTROLS – выводит панель для управления воспроизведением видео файла;

· TYPE – MIME формат видео файла;

· POSTER – значение атрибута содержит путь к графическому файлу, который будет служить в качестве заставки в панели просмотра видео. Если атрибут не указан, то браузер отобразит первый кадр видео, либо темный экран;

· WIDTH, HEIGHT – атрибут содержит размеры блока в котором отображается видео в “px”;

· LOOP – атрибут зацикливания воспроизведения видео;

 

Пример по добавлению видео

	<video width="300px" controls>
	<source src="video.mp4" type="video/mp4" />
	<source src="video.ogg" type="video/ogg" />
	Ваш браузер не поддерживает HTML5, обновите его до последней версии.
	</video>

Рис 4. Внешний вид видео проигрывателя реализованного с помощью HTML5