Размещение видео-роликов на сайте

Размещение видео-роликов на сайте

Рассмотрим два способа: простой и сложный.

Установка дополнения Flowplayer

Простой способ подходит для тех, кто не хочит особо заморачиватся, и состоит в установке дополнения Flowplayer из репозитория и его вызова, например так:

Здесь всё понятно — указываем путь к .flv файлу и остальные параметры вывода. У меня почему-то конфликтовал данный проигрыватель или сам сниппет с шаблоном на бутстрепе. А так в этом способе одни плюсы — проигрыватель поддерживается всеми браузерами, отзывчивый, легко настраивается под нужды пользователя, можно его встраивать, кастомизировать. Подробнее на официальном сайте

Создание HTML5 роликов

Для любителей сложного и детального представляю второй способ. Итак создадим собственный HTML5 элемент видео на нашей странице для вывода видеороликов. Перед этим давайте разберёмся с видеоформатами для сети и кодеками для них. Более подробно можете почитать на Хабре (ссылки внизу) либо на официальных сайтах данных кодеков.

Типы видеоформатов и кодеков и программы для них

Видео файл в любом из видео форматов, следует воспринимать как zip-архив содержащий видео поток и аудио поток. Вот главные три видео формата для сети, которые поддерживаются на данный момент основными браузерами:

Для чего эта информация? После монтажа вы получите видео, например, в .avi формате. Далее необходимо его перекодировать в эти три формата с соответствующими кодеками для вывода на сайте. Для этого можно использовать, как это делаю я (моя ОС — Linux Mint Cinnamon), программу Transcoder либо WinFF для любителей MS Windows.

Настройка .htaccess

Видео должно передаваться с сервера с коректными MIME Types в заголовках, поэтому укажем их в .htaccess:

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

Типовая вставка 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 сайта):

<link rel="stylesheet" href="assets/src/css/mediaelementplayer.css">
<link rel="stylesheet" href="assets/src/css/mejs-skins.css">

И скрипты (я обычно вставляю в низ сайта):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/src/js/mediaelement-and-player.min.js"></script>
<script>
    $('audio,video').mediaelementplayer({
      success: function(player, node) {
      $('#' + node.id + '-mode').html('mode: ' + player.pluginType);
    }
  });
</script>

Если вы хотите использовать другой скин из предлагаемых, то просто поменяйте класс для тега video class="mejs-ted". Далее можно применить MIGX или создать свой сниппет для более удобной работы с видеороликами. Продолжение следует...

Список источников информации:

http://www.webmproject.org/about/faq/

http://praegnanz.de/html5video/

http://habrahabr.ru/post/104591/

http://transcoder84.sourceforge.net/

http://winff.org/html_new/

http://mediaelementjs.com/