Продолжительное время для воспроизведения видео на сайтах использовался в большинстве случаев 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.
Казалось бы ничего сложного, но часто об этом забывают.
Автор: int22h
