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

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

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

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

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

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

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.

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