Предыстория
Не так давно мне понадобился видео плеер для своего сайта. После долгих поисков я остановился на конструкторе Uppod, ведь в нем есть и HTML5 и Flash версии, удобный конструктор стилей и т.п., но все же чего-то не хватало, а именно — выдачи HTML5 при отсутствии Flash. В документации я особо ничего не нашел, кроме кусочка кода для определения поддержки flash в браузере. В общем, слава
Задача
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 можно по этой ссылке.
Комментарии (2)
oWeRQ
07.07.2015 14:04+1> выдачи HTML5 при отсутствии Flash
Должно быть наоборот, если есть нативная поддержка видео, зачем использовать костыли? Если браузер древний и нет Flash, то предлагать его поставить, а лучше поставить браузер.
P. S. Убивает подобный подход, насколько я помню, vk спокойно играет музыку без Flash, однако, если он установлен, пытается использовать его.
saggid
Есть ещё video.js — очень хороший открытый видеоплеер. Есть html5, flash, через доп. плагины показывает видео с разных сервисов, вроде ютуба, и так далее) Приятная штука, в общем.