При реализации одного из проектов столкнулся с небольшой задачей, а именно встраивание на страницу сайта 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
Автор: zpvs
