Кроссбраузерное воспроизведение видео на html5

Продолжительное время для воспроизведения видео на сайтах использовался в большинстве случаев flash. Но выход html5 принес свои изменения. И сейчас мы рассмотрим как использовать html5 для видео на Вашем сайте.

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

Нужные форматы:

• .mp4 или .m4v — основной формат для продукции Apple
• .ogv — в основном используется для Firefox
• .webm — открытый формат от Google

Подготовить видео в разных форматах можно в любимой программе для конвертирования. Или же воспользоваться онлайн сервисами, к примеру Video Converter ^[1].

Html для вставки видео:

<video width="500" height="600">
	<source src="video.mp4" type="video/mp4" />
	<source src="video.ogv" type="video/ogg" />
	<source src="video.webm" type="video/webm" />
	Тег video не поддерживается Вашим браузером.
</video>

Важно отметить, чтобы видео нормально проигрывалось на iPad нужно начинать с формата .mp4. В старых браузерах, которые не поддерживают html5 тег video, будет выведено соответствующее сообщение.
Также очень важно чтобы сервер отдавал правильные заголовки для видео файлов в Content-Type.
Для большей уверености можно добавить в файл .htaccess следующие строки:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Если же нужно чтоб видео воспроизводилось и в старых браузерах, можно по старинке подключить любой flash плеер. В большинстве случаев нам понадобится еще видео в формате .flv:

<video width="500" height="600">
	<source src="video.mp4" type="video/mp4" />
	<source src="video.ogv" type="video/ogg" />

	<object width="500" height="600" type="application/x-shockwave-flash" data="player.swf">
		<param name="movie" value="player.swf" />
		<param name="flashvars" value="autostart=true,file=video.flv" />
	</object>

</video> 

Для тега video можно использовать много опций:

• autoplay — автоматическое воспроизведение видео
• loop — зацикливание воспроизведения
• poster — адрес картинки для первого кадра, пока видео не воспроизводится

Весь список опций можно посмотреть на страничке спецификации w3 site ^[2].

Казалось бы ничего сложного, но часто об этом забывают.

Автор: int22h

Источник ^[3]