Вставка и воспроизведение видео на сайте

Отредактировано: 05 Апреля 2018

На момент написания статьи самым популярным способом вставки видео на сайт является тег video,  появившийся с выходом html5. 

<video controls width="400" height="300">
  <source src="video.mp4" type="video/mp4"><!-- MP4 для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7 -->
  <source src="video.webm" type="video/webm"><!-- WebM/VP8 для Firefox4, Opera, и Chrome -->
  <source src="video.ogv" type="video/ogg"><!-- Ogg/Vorbis для старых версий браузеров Firefox и Opera -->
  <object data="video.swf" type="application/x-shockwave-flash"><!-- добавляем видеоконтент для устаревших браузеров, в которых нет поддержки элемента video -->
    <param name="movie" value="video.swf">
  </object>
</video>

Чтобы видео могло воспроизводиться, у браузера должны быть соответствующие кодеки. Проблем с отсутствием кодеков у браузера обычно не встречается, а вот проблема с неправильной интерпретацией расширения — бывает. Чтобы сервер знал, как интерпретировать то или иное расширение, используется такая конструкция

AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
AddType application/x-shockwave-flash swf

Бывает проблема с тем, что Apache сжимает медиафайлы (gzip сжатие), вследствие чего файлы могут воспроизводиться не полностью. Эту проблему поможет решить подобная конструкция

RewriteRule ^(.*)\.ogv - [E=no-gzip:1]
RewriteRule ^(.*)\.mp4 - [E=no-gzip:1]
RewriteRule ^(.*)\.m4v - [E=no-gzip:1]