Own JS Wrapper for Uppod Player

Prehistory

Not so long ago I needed a video player for my site. After a long search, I stopped at the Uppod designer , because it has both HTML5 and Flash versions, a convenient style designer, etc., but still something was missing, namely, HTML5 output in the absence of Flash. I didn’t find anything in the documentation except a piece of code to determine flash support in the browser. In general, thanks to crutches , I solved my problem and made a working model using JS and Uppod API and now I want to share it with you, who can come in handy.

Task

1. Embed a shared video player on the site for different sections, and this is playing videos from Youtube, Rutube and your media content;
2. Determine which player you want to give to the browser;
3. In certain cases (for example, in the absence of flash), to launch not a player, but another command;
4. Make your shell so that when you change the operation of the Uppod players, quickly rewrite everything, without touching the code throughout the site, as well as, if necessary, disable or replace the player itself, or some of its functions;
5. Simplify embedding, because writing a bunch of code in all sections is not a big deal.

What do we need?

Simple connection according to the html5 instructions and flash player. In general, all the documentation Uppod.

Let's get to work

First, create a file player.js and place it in the folder with the site.
')
The file code player.js

Flash support definition (see source ):

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) {}; }; 

Also, the Uppod JavaScript API (see source ):

 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); } 

Next, we will write our code, which will initialize the launch of the player:

 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); } } } 

Function to launch HTML5 player:

 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; } 

The function for creating and reading an additional attribute on the player:

 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'; } 

The alias of the API request function to the Uppod player is a bit modernized:

 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(); } } } 

Well, that's all, now save our player.js and connect it to the head of the site, like all js files of the player.

 <script src="http://site.ru/player.js" type="text/javascript"></script> 

Player initialization and analysis of parameters

First, let's look at the parameters, for the most part they are named as in the Uppod player documentation :

id - Player Container ID
st - Style Link
pl - Playlist or link to it
file - Link to media file (if pl is not specified)
type - player type audio / video
screen - Link to the video splash screen.
swf - Link to player
st5 - The name of the style variable for the HTML5 player, or the style code
finder - flash / html5 properties, if the specified player could not be launched, it will return the callback function
detect - flash / html5 properties, forced launch of the specified player
A simple example with the required parameters (for html5 and flash versions)

 <div id="player"></div> <script type="text/javascript"> vars = { id: 'player', // id  type: 'video', //   file: 'video.mp4', //    swf: 'uppod.swf', //    }; new Player(vars); </script> 

Sample code, if you want to run only one version of the player and, if it is not supported, the callback function will be returned:

 <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> 

Supported API control buttons (there are few of them, I didn’t pay much attention to them) by both versions of the Uppod player:

play - Player launch
pause - pause
stop - stop
toggle - Start / Pause
v50 - Volume up 50%
file - Run a new file (file: url)
These buttons work from the sendPlayer function ('player_id', 'command').

Example:

 <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> 

Well, actually, that's all I wanted to write. Who needs, use on health.

An example can be seen here , download the finished player.js at this link .