- PVSM.RU - https://www.pvsm.ru -
При реализации одного из проектов столкнулся с небольшой задачей, а именно встраивание на страницу сайта vlc плеера при этом плеер должен поддерживать возможность стилизации и воспроизведение рекламного ролика перед проигрыванием основного медиафайла или потока.
Так как ранее уже доводилось встраивать vlc на страницу сайта (воспроизведение с камер), сразу же отправился на страницу вики проекта vlc. Детальное изучение, которой показало, что стандартными методами это реализуемо, но готовых решений не представлено. Помня, что «лень двигатель прогресса» отправился в google искать варианты встраивания плеера. Потратив несколько часов, пришёл к выводу, что существующих реализаций совсем не много и большинстве своем берут начало от разработанного Julien Bouquillon плагина «VLCcontrols». Одна проблема данный плагин обновлялся последний раз в 2010 году.
Ну, раз нет готовых решений, значит, будем писать свою обертку для плагина. Произведя запасы бумаги для заметок, кофе и сигарет засел за изучение найденного плагина и составления плана работ.
Закончив с подготовительной работой, сперва решил все же переделать плагин «VLCcontrols». О том, что я глубоко ошибся в выборе, до меня дошло уже после переделки. Некоторые функции работали не так, как мне было нужно, ну а другие вообще переставали работать при вроде бы обычных действиях. Ну ладно, на ошибках учатся, буду писать все с нуля.
Сказано-сделано, первая версия была написана быстрее, чем переделывался плагин. Потом были еще версии, в которых добавлялись другие функции, но ломались уже реализованные. В конечном итоге появилась стабильная версия с поддержкой большинства функционала vlc plugina, заказчик принял работу, но добавил еще по реализации дополнительных функций.
Работает все это очень просто.
Подключаем скрипт к сайту и просто вызываем плеер, передавая ему параметры:
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 [1]
При разработке использованы материалы:
Плагин Julien Bouquillon VLCcontrols [2]
Документация с wiki VideoLAN [3]
Автор: zpvs
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/39719
Ссылки в тексте:
[1] github.com/zpvs/hplayer: https://github.com/zpvs/hplayer
[2] VLCcontrols: http://blog.revolunet.com/VLCcontrols/
[3] wiki VideoLAN: http://wiki.videolan.org/Documentation:WebPlugin
[4] Источник: http://habrahabr.ru/post/188232/
Нажмите здесь для печати.