Размещение видео-роликов на сайте
Рассмотрим два способа: простой и сложный.
Установка дополнения Flowplayer
Простой способ подходит для тех, кто не хочит особо заморачиватся, и состоит в установке дополнения Flowplayer из репозитория и его вызова, например так:
[[!flowplayer?
&url=/video/flv/Chapel-Band-Ever_Sing.flv
&title=Test Video
&time=1:25
&autoplay=true
&loop=false
&class=myVideos
]]
Здесь всё понятно — указываем путь к .flv файлу и остальные параметры вывода. У меня почему-то конфликтовал данный проигрыватель или сам сниппет с шаблоном на бутстрепе. А так в этом способе одни плюсы — проигрыватель поддерживается всеми браузерами, отзывчивый, легко настраивается под нужды пользователя, можно его встраивать, кастомизировать. Подробнее на официальном сайте
Создание HTML5 роликов
Для любителей сложного и детального представляю второй способ. Итак создадим собственный HTML5 элемент видео на нашей странице для вывода видеороликов. Перед этим давайте разберёмся с видеоформатами для сети и кодеками для них. Более подробно можете почитать на Хабре (ссылки внизу) либо на официальных сайтах данных кодеков.
Типы видеоформатов и кодеков и программы для них
Видео файл в любом из видео форматов, следует воспринимать как zip-архив содержащий видео поток и аудио поток. Вот главные три видео формата для сети, которые поддерживаются на данный момент основными браузерами:
Формат Видеокодек Аудиокодек
mp4 H.264 AAC
.ogg/.ogv Theora Vorbis
.webm VP8 Vorbis
Для чего эта информация? После монтажа вы получите видео, например, в .avi формате. Далее необходимо его перекодировать в эти три формата с соответствующими кодеками для вывода на сайте. Для этого можно использовать, как это делаю я (моя ОС — Linux Mint Cinnamon), программу Transcoder либо WinFF для любителей MS Windows.
Настройка .htaccess
Видео должно передаваться с сервера с коректными MIME Types в заголовках, поэтому укажем их в .htaccess:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Для тех кто пользуется NGINX будет полезна эта ссылка https://github.com/bentruyman/html5-boilerplate/…
Типовая вставка HTML5 video
Теперь можно вставить сам код для вывода HTML5 видео:
<video poster="assets/img/July.jpg" controls="controls" preload="none">
<source type="video/mp4" src="/assets/videos/July.mp4" />
<source type="video/webm" src="/assets/videos/July.webm" />
<source type="video/ogg" src="/assets/videos/July.ogg" />
</video>
Как видно мы можем дополнительно к видео указать постер (плейсхолдер) — изображение для вывода в режиме перед проигрыванием ролика и некоторые другие параметры. Укажем также ширину и высоту. Чтобы видео проигрывалось браузерами не поддерживающими video теги будем использовать Flash плеер, который поддерживает проигрывание .mp4 видео:
<video width="640" height="360" poster="assets/img/July.jpg" controls="controls" preload="none">
<source type="video/mp4" src="/assets/videos/July.mp4" />
<source type="video/webm" src="/assets/videos/July.webm" />
<source type="video/ogg" src="/assets/videos/July.ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=assets/videos/July.mp4" />
<img src="/assets/img/July.jpg" width="360" height="360" title="Нет возможности проиграть видео" />
</object>
</video>
Внимательные читатели заметят название плеера — flashmediaelement и именно этот проигрыватель я буду использовать с последующей его настройкой.
HTML5 проигрыватель MediaElementjs
Демо проигрывателя есть на официальном сайте — mediaelementjs.com. Сам проигрыватель «из коробки» выглядит очень достойно. Скачать можно по ссылке с гитхаба. В демо можно взять файлы стилей (вставляйте в head сайта):
`
`И скрипты (я обычно вставляю в низ сайта):
`
`Если вы хотите использовать другой скин из предлагаемых, то просто поменяйте класс для тега video class="mejs-ted".
Далее можно применить MIGX или создать свой сниппет для более удобной работы с видеороликами.
Продолжение следует…
Список источников информации:
http://www.webmproject.org/about/faq/
http://praegnanz.de/html5video/
http://habrahabr.ru/post/104591/