[Из песочницы] Своя JS обертка для Uppod плеера
Предыстория
Не так давно мне понадобился видео плеер для своего сайта. После долгих поисков я остановился на конструкторе 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 файлы плеера.
Инициализация плеера и разбор параметров
Сначала давайте разберем параметры, в большей части они именованны как и в документации Uppod плеера:
id — Идентификатор контейнера для плеера
st — Cсылка на стили
pl — Плейлист или ссылка на него
file — Ссылка на медиа файл (если не указан pl)
type — Тип плеера audio/video
screen — Ссылка на заставку видео
swf — Ссылка на плеер
st5 — Название переменной стилей для HTML5 плеера, или код стиля
finder — свойства flash/html5, если не удалось запустить указанный плеер, вернет callback функцию
detect — свойства flash/html5, принудительный запуск указанного плеера
Простой пример с обязательными параметрами (для html5 и flash версии)
Пример кода, если требуется запустить только одну версию плеера и, в случае если он не поддерживается, будет возвращена callback функция:
Поддерживаемые API кнопки управления (их мало, особо не акцентировал внимание на них) обоими версиями Uppod плеера:
play — Запуск плеера
pause — Пауза
stop — Стоп
toggle — Пуск / Пауза
v50 — Громкость на 50%
file — Запуск нового файла (file: url)
Эти кнопки работают от функции sendPlayer ('идентификатор_плеера', 'команда').
Пример:
Play
Pause
Toggle
Stop
Громкость 50%
File:Url
Ну, собственно, это все, что хотел написать. Кому нужно, пользуйтесь на здоровье.
Пример можно увидеть здесь, скачать готовый player.js можно по этой ссылке.
