Новый вид mozilla vlc plugin

При реализации одного из проектов столкнулся с небольшой задачей, а именно встраивание на страницу сайта vlc плеера при этом плеер должен поддерживать возможность стилизации и воспроизведение рекламного ролика перед проигрыванием основного медиафайла или потока.
Так как ранее уже доводилось встраивать vlc на страницу сайта (воспроизведение с камер), сразу же отправился на страницу вики проекта vlc. Детальное изучение, которой показало, что стандартными методами это реализуемо, но готовых решений не представлено. Помня, что «лень двигатель прогресса» отправился в google искать варианты встраивания плеера. Потратив несколько часов, пришёл к выводу, что существующих реализаций совсем не много и большинстве своем берут начало от разработанного Julien Bouquillon плагина «VLCcontrols». Одна проблема данный плагин обновлялся последний раз в 2010 году.

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

Что необходимо было сделать

• Разработать интерфейс плеера с возможность легко его изменить.
• Реализовать базовых функций плеера (воспроизведение, стоп, пауза, регулирование звука, полноэкранный режим).
• Написать функционал позволяющий показать рекламу, которая не блокировалась бы AdBlock.
• Реализовать поддержку дополнительных методов, которые поддерживаются mozilla vlc plugin.
• Максимально упростить интеграцию на страницу.
• Поддержка различными браузерами.

Закончив с подготовительной работой, сперва решил все же переделать плагин «VLCcontrols». О том, что я глубоко ошибся в выборе, до меня дошло уже после переделки. Некоторые функции работали не так, как мне было нужно, ну а другие вообще переставали работать при вроде бы обычных действиях. Ну ладно, на ошибках учатся, буду писать все с нуля.
Сказано-сделано, первая версия была написана быстрее, чем переделывался плагин. Потом были еще версии, в которых добавлялись другие функции, но ломались уже реализованные. В конечном итоге появилась стабильная версия с поддержкой большинства функционала vlc plugina, заказчик принял работу, но добавил еще по реализации дополнительных функций.

Что же реализовано в данной обертке?

• Автоматическое воспроизведение сразу после загрузки плагина.
• Демонстрация рекламного ролика с возможностью настройки времени демонстрации(AdBlock не блокирует)
• Возможность менять вид плеера изменив css файл.
• Поддержка всех базовых функций плеера
• Изменение соотношения сторон, чересстрочности, аудиоканалов
• 2 вида полноэкранного режима (стандартный и через HTML5 Fullscreen API)
• Включение режима, при котором на плеер, возможно, накладывать различные эффекты css
• Воспроизведение видеофайла из куков или из указанного параметра

Работает все это очень просто.

Подключаем скрипт к сайту и просто вызываем плеер, передавая ему параметры:

hPlayer.init(); 

Приведу основной список параметров, которые воспринимает обертка:

wrapper — Принимает id DOM контейнера, в который необходимо загрузить плеер. * ID элемента — Плеер будет загружен в указанный DOM контейнер. * NULL(не задано значение) — Плеер будет загружен в контейнер по умолчанию(id=»hPlayer»).  mode — Указание какой из плагинов инициализировать для дальнейшего проигрывания контента. * http — загрузка vlc плагина. * NULL(не задано значение) — загрузка оболочки без инициализации плагина.  stream — Поток видео данных, который необходимо воспроизвести в плеере. * ‘Поток данных’ — после загрузки всех настроек и инициализации плеера будет запущено проигрывание указанного потока. * NULL(не задано значение) — загрузка оболочки и инициализация плагина.  windowless * true — включение облегченного режима воспроизведения плагином. Активирует возможности манипуляций с плагином средствами CSS. Не стабильная функция. При использовании переключение в полноэкранный режим реализовано при помощи Fullscreen API. * NULL(не задано значение) — наследование установленных ранее настроек (по умолчанию «false»).  ad_state * true — активирует показ рекламного видеоролика перед воспроизведением основного медиафайла. * NULL(не задано значение) — наследование установленных ранее настроек (по умолчанию «false»).  ad_link * ‘http://site.com/adsvideo.avi’ — ссылка на медиафайл который будет транслироваться при активации ad_state. * NULL(не задано значение) — наследование установленных ранее настроек (по умолчанию «пусто»).  ad_time * ‘время в миллисекундах’ — указание длительности показа рекламного медиафайла. * NULL(не задано значение) — наследование установленных ранее настроек (по умолчанию «10000 мс/10 секунд»). 

Примеры

Обычный запуск с передачей параметров.

hPlayer.init({             wrapper: 'hPlayer',             autoplay: true,             loop: true,             windowless: true,             stream: 'http://site.com.ua/mainvideo.avi',             mode: 'http' }); 

Воспроизведение рекламы перед проигрыванием основного файла.

hPlayer.init({             wrapper: 'hPlayer',             stream: 'http://site.com.ua/mainvideo.avi',             autoplay: true,             loop: true,             mode: 'http',             ad_state:true,             ad_link: 'http://site.com.ua/videofile.flv',             ad_time: 10000 }); 

Забрать и пользоваться можно на гитхабе: github.com/zpvs/hplayer

При разработке использованы материалы:
Плагин Julien Bouquillon VLCcontrols
Документация с wiki VideoLAN