Предыстория
Не так давно мне понадобился видео плеер для своего сайта. После долгих поисков я остановился на конструкторе Uppod, ведь в нем есть и HTML5 и Flash версии, удобный конструктор стилей и т.п., но все же чего-то не хватало, а именно — выдачи HTML5 при отсутствии Flash. В документации я особо ничего не нашел, кроме кусочка кода для определения поддержки flash в браузере. В общем, слава костылям, я решил свою проблему и сделал рабочую модель при помощи JS и Uppod API и теперь хочу поделиться ею с вами, может кому пригодится.
Задача
1. Встроить общий видео плеер на сайт для различных разделов, а это проигрывание видео из Youtube, Rutube и своего медиа контента;
2. Определять, какой плеер нужно отдать в браузер;
3. В определенных случаях (например, при отсутствии flash) запускать не плеер, а другую команду;
4. Сделать свою оболочку, чтобы при изменении пинципа работы плееров Uppod быстро все переписать, не трогая код по всему сайту, а так же при необходимости отключить или заменить сам плеер, или его некоторые функции;
5. Упростить встраивание, ибо писать кучу кода во всех разделах не особо охота.
Что нам понадобиться?
Простое подключение по инструкции html5 и flash плеера. В общем, все по документации Uppod.
Приступим к работе
Для начала создадим файл player.js и разместим его в папку с сайтом.
Код файла player.js
Определение поддержки Flash (см. источник):
var ua = navigator.userAgent.toLowerCase(); var flashInstalled = 0; if (typeof(navigator.plugins) != "undefined" && typeof(navigator.plugins["Shockwave Flash"]) == "object") { flashInstalled = 1; } else if (typeof window.ActiveXObject != "undefined") { try { if (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) { flashInstalled = 1; } } catch(e) {}; }; Так же Uppod JavaScript API (см. источник):
function uppodEvent(playerID, event) { switch(event){ case 'init': break; case 'start': break; case 'play': break; case 'pause': break; case 'stop': break; case 'seek': break; case 'loaded': break; case 'end': break; case 'download': break; case 'quality': break; case 'error': break; case 'ad_end': break; case 'pl': break; case 'volume': break; } } function uppodSend(playerID, com, callback) { document.getElementById(playerID).sendToUppod(com); } function uppodGet(playerID, com, callback) { return document.getElementById(playerID).getUppod(com); } Далее будем уже писать наш код, который и будет инициализировать запуск плеера:
function Player(e, callback) { vars = { m: e.type, id: e.id, uid: e.id, finder: e.finder, detect: e.detect, }; if (e.file) { vars.file = e.file; } if (e.pl) { vars.pl = e.pl; } if (e.st) { vars.st = e.st; } if (e.st5) { vars.st5 = e.st5; } if (e.screen) { vars.poster = e.screen; } if (!e.style) { e.style = {w: '480px', h: '360px'}; } if ((e.finder === 'flash' && !flashInstalled) || (e.finder === 'html5' && flashInstalled)) { callback(); } else if ((ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1 || ua.indexOf("android") != -1 || ua.indexOf("windows phone") != -1 || ua.indexOf("blackberry") != -1 || e.detect == 'html5') && e.detect != 'flash') { htm5Player(e); } else { if(!flashInstalled && e.detect != 'flash') { htm5Player(e); } else { params = { "id": e.id, "allowFullScreen": "true", "allowScriptAccess": "always", } new swfobject.embedSWF(e.swf, vars.id, e.style.w, e.style.h, "10.0.0", false, vars, params); } } } Функция для запуска HTML5 плеера:
function htm5Player(e) { vars = { m: e.type, uid: e.id, }; if (e.screen) { vars.poster = e.screen; } if (e.file) { vars.file = e.file; } if (e.pl) { vars.pl = e.pl; } if (e.st5) { vars.st = e.st5; } player = new Uppod(vars); uppodDetect(e.id, 'html5'); var doc = document.getElementById(e.id); doc.style.width = e.style.w; doc.style.height = e.style.h; } Функция для создания и чтения дополнительного атрибута у плеера:
function uppodDetect(id, type) { doc = document.getElementById(id); if (type) { doc.setAttribute('data-uppod-detect', type); } detect = doc.getAttribute('data-uppod-detect'); if (detect == 'html5') { return 'html5'; } return 'flash'; } Псевдоним функции API запросов к плееру Uppod немного модернизированный:
function sendPlayer(id, com, callback) { if (uppodDetect(id) == 'flash') { document.getElementById(id).sendToUppod(com); } else { if (com == 'play') { player.Play() } else if (com == 'pause') { player.Pause() } else if (com == 'toggle') { player.Toggle() } else if (com == 'stop') { player.Stop() } else if (com.match(/file:/i)) { com = com.replace(/file:/g, ''); player.Play(com); } else if (com.match(/v/i)) { com = com.replace(/v/g, ''); player.Volume(com / 100); } else if (com == 'download') { player.Download(); } } } Ну, вот и все, теперь сохраняем наш player.js и подключаем его в head сайта, как и все js файлы плеера.
<script src="http://site.ru/player.js" type="text/javascript"></script>
Инициализация плеера и разбор параметров
Сначала давайте разберем параметры, в большей части они именованны как и в документации Uppod плеера:
id — Идентификатор контейнера для плеера
st — Cсылка на стили
pl — Плейлист или ссылка на него
file — Ссылка на медиа файл (если не указан pl)
type — Тип плеера audio/video
screen — Ссылка на заставку видео
swf — Ссылка на плеер
st5 — Название переменной стилей для HTML5 плеера, или код стиля
finder — свойства flash/html5, если не удалось запустить указанный плеер, вернет callback функцию
detect — свойства flash/html5, принудительный запуск указанного плеера
Простой пример с обязательными параметрами (для html5 и flash версии)
<div id="player"></div> <script type="text/javascript"> vars = { id: 'player', // id плеера type: 'video', // тип плеера file: 'video.mp4', // ссылка на файл swf: 'uppod.swf', // ссылка на плеер }; new Player(vars); </script> Пример кода, если требуется запустить только одну версию плеера и, в случае если он не поддерживается, будет возвращена callback функция:
<div id="player"></div> <script type="text/javascript"> vars = { id: 'player', type: 'video', file: 'http://rutube.ru/video/bde119ee2ce067e7fc6124398d7043d3/', // Видео с Rutube только для flash версии swf: 'player/uppod-rutube.swf', finder: 'flash', }; new Player(vars, function () { document.getElementById('player').innerHTML = '<iframe src="http://rutube.ru/play/embed/7821719" width="100%" height="360" frameborder="0"></iframe>'; // Если нет поддержки flash, то здесь можно выполнить свой код. }); </script> Поддерживаемые API кнопки управления (их мало, особо не акцентировал внимание на них) обоими версиями Uppod плеера:
play — Запуск плеера
pause — Пауза
stop — Стоп
toggle — Пуск / Пауза
v50 — Громкость на 50%
file — Запуск нового файла (file:url)
Эти кнопки работают от функции sendPlayer (‘идентификатор_плеера’, ‘команда’).
Пример:
<a onclick="sendPlayer('player', 'play');" title="Пуск">Play</a> <a onclick="sendPlayer('player', 'pause');" title="Пауза">Pause</a> <a onclick="sendPlayer('player', 'toggle');" title="Пуск / Пауза">Toggle</a> <a onclick="sendPlayer('player', 'stop');" title="Стоп">Stop</a> <a onclick="sendPlayer('player', 'v50');" title="Громкость=50">Громкость 50%</a> <a onclick="sendPlayer('player', 'file:http://uppod.net/sample.flv');" title="Запуск нового файла">File:Url</a> Ну, собственно, это все, что хотел написать. Кому нужно, пользуйтесь на здоровье.
Пример можно увидеть здесь, скачать готовый player.js можно по этой ссылке.
ссылка на оригинал статьи http://habrahabr.ru/post/261911/
Добавить комментарий