Andryushkin.ru
Блог им. alex-borisi (Александра Андрюшкина)

Своя 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 файлы плеера.

<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 можно по этой ссылке.