Browser-Aware Player code

Note: As of late 2011, there’s a better way to do this now.

Code to insert a player inside a div (named videoframe in this case). This will present either an instance of JW Player version 5 (default), JW Player version 4 for PlayStation (which do not have Flash 10), an HTML5 video element in the case of iPhone/iPad devices, and a graphic (that looks like JW Player for a consistent UX) hyperlinked to an RTSP feed for Android/BlackBerry/WebOS devices or an MMS feed for IE Mobile devices. David Walsh also has a post about how to do it with PHP

<div id="videoframe"></div>
 
<SCRIPT type="text/javascript">
// Browser-aware video player for JW Player and Wowza
// V0.2 - June 2, 2010
// (c)2010 Ian Beyer
// Released under the GPL
 
var agent=navigator.userAgent.toLowerCase();
var is_iphone = (agent.indexOf('iphone')!=-1);
var is_ipad = (agent.indexOf('ipad')!=-1);
var is_playstation = (agent.indexOf('playstation')!=-1);
var is_safari = (agent.indexOf('safari')!=-1);
var is_iemobile = (agent.indexOf('iemobile')!=-1);
var is_blackberry = (agent.indexOf('blackberry')!=-1);
var is_android = (agent.indexOf('android')!=-1);
var is_webos = (agent.indexOf('webos')!=-1);
 
if (is_iphone) { html5Player();}
else if (is_ipad) { html5Player(); }
else if (is_android) { rtspPlayer(); }
else if (is_webos) { rtspPlayer(); }
else if (is_blackberry) { rtspPlayer(); }
else if (is_iemobile) { windowsPlayer(); }
else if (is_playstation) { oldJWPlayer(); }
else { newJWPlayer(); }
 
function html5Player()
{
var player=document.getElementById("player")
player.innerHTML='<VIDEO '+
'SRC="http://wowza2:1935/live/stream/playlist.m3u8" '+
'HEIGHT="480" '+
'WIDTH="640" '+
'poster="poster.png" '+
'title="Live Stream">'+
'</video>';
}
 
function rtspPlayer()
{
var player=document.getElementById("player")
player.innerHTML='<A HREF="rtsp://wowza2:1935/live/stream">'+
'<IMG SRC="player-fake.png" '+
'ALT="Start Mobile Video" '+
'BORDER="0" '+
'HEIGHT="480" '+
'WIDTH="640">'+
'</A>';
}
 
function windowsPlayer()
{
var player=document.getElementById("player")
player.innerHTML='<A HREF="mms://windows/pubpoint">'+
'<IMG SRC="player-fake.png" '+
'ALT="Start Windows Mobile Video" '+
'BORDER="0" '+
'HEIGHT="480" '+
'WIDTH="640">'+
'</A>';
}
 
function oldJWPlayer()
{
var so = new SWFObject('player-45.swf','mpl','640','480','8');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('autostart', 'false');
so.addVariable('type', 'rtmp');
so.addVariable('streamer','rtmp://wowza-origin:1935/redirect');
so.addVariable('file','stream');
so.addVariable('controlbar','over');
so.addVariable('dock','true');
so.addVariable('image','poster.png');
so.write('player');
}
 
function newJWPlayer()
{
var so = new SWFObject('player-5.swf','mpl','640','480','10');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('autostart', 'false');
so.addVariable('type', 'rtmp');
so.addVariable('streamer','rtmp://wowza-origin:1935/redirect');
so.addVariable('file','stream');
so.addVariable('controlbar','over');
so.addVariable('dock','true');
so.addVariable('image','poster.png');
so.write('player');
}
 
</SCRIPT>

The CaNerdIan

Share this: