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>
  • http://tilt180.com Kevin

    Very cool code. I may try it as proof in concept for some HTML5 projects I have going on.

    Thanks!

  • http://alterlatina.com Arturo Calle

    This is wonderful!! thanks! I will try it…

  • http://www.yourmedia.gr Hercules

    Thats a suberb code my friend, and it was exactly was i was looking for, so thank you very much :)

    I tested with my HTC HD2 device from the opera 10beta that i installed and it was not working, seemed to me that it was missing something, then i added the bellow code and it worked.

    var is_opera = (agent.indexOf(‘opera’)!=-1);
    else if (is_opera) { operaPlayer(); }
    function operaPlayer()
    {
    var player=document.getElementById(“player”)
    player.innerHTML=’‘+
    ”+
    ‘;
    }

    So if you are interested you can put the above code into your script for opera users to :)

    My problem now is that when i try to view it from the mobile i.e it does not work… i tried all the user agents :/
    IEMobile, MSIE 6.0 but nothing :/ maybe you can help me out ?
    thanks in advance

  • Adriano Maciel

    Please, help me: no function
    is a blank page and nothing happens, help me, I pasted the
    same script is there and created a test page.

  • Pingback: Browser-aware player code, revisited | Streaming My Consciousness

Go to Top