Browser-Aware Player Code, 2014 Edition

May 19, 2014 Code, streaming, Wowza

Yet another installment in the never-ending series of dealing with different platforms. This is precipitated by the continued boneheadedness of Google when it comes to supporting any live streaming transports in the native browser (they just simply don’t). Some handset manufacturers are adding HLS support back, though. You’ll notice there’s also code in here to reference an MPEG-DASH manifest as well as “sanjose” and “smooth” (in Wowza parlance). This script doesn’t make use of those capabilities at the moment, but once I get a good list of which browsers can support MSE and DASH.js, I’ll update it to be able to use that player. This assumes that you’re using cloud-hosted JW Player with a key, but if you’re not, simply replace the first SCRIPT reference with your locally hosted JWPlayer file and comment out the jwplayer.key line. If you wish to use a different player such as FlowPlayer, you can replace the appropriate code in the flashPlayer() function.

Player

jwplayer.key='XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
jwplayer.defaults = { "ph": 2 };

// Browser-aware video player for JW Player and Wowza
// V0.3 - May 19, 2014
// (c)2014 Ian Beyer
// Released under the GPL
var container='videoframe';
var width="100%";
var aspect="4:3";
//This section calculates actual sizes for player when using non-responsive elements.
var multiplier=aspect.split(":");
var fixedwidth = Math.floor(window.innerWidth\\*width.split("%")[0]/100);
var fixedheight = Math.floor(window.innerWidth\\*multiplier[1]/multiplier[0]\\*width.split("%")[0]/100);
console.log ('Size: '+width+', '+aspect+' ('+fixedwidth+' x '+fixedheight+')');
var streamserver='wowzanode1.tvwmedia.net';
var streamport='1935';
var streamapp='srcEncoders';
var streamname='TVW01';
var streambase=streamserver+':'+streamport+'/'+streamapp+'/\\_definst\\_/'+streamname;
var cupertinourl='http://'+streambase+'/playlist.m3u8';
var sanjoseurl='http://'+streambase+'/Manifest.f4m';
var smoothurl='http://'+streambase+'/Manifest';
var dashurl='http://'+streambase+'/manifest.mpd';
var rtmpurl='rtmp://'+streambase;
var rtspurl='rtsp://'+streambase;
var agent=navigator.userAgent.toLowerCase();
var is\\_iphone = (agent.indexOf('iphone')!=-1);
var is\\_ipad = (agent.indexOf('ipad')!=-1);
var is\\_ipod = (agent.indexOf('ipod')!=-1);
var is\\_safari = (agent.indexOf('safari')!=-1);
var is\\_iemobile = (agent.indexOf('iemobile')!=-1);
var is\\_blackberry = (agent.indexOf('blackberry')!=-1);
var is\\_android1= (agent.indexOf('android\ 1')!=-1);
var is\\_android2= (agent.indexOf('android\ 2')!=-1);
var is\\_android3= (agent.indexOf('android\ 3')!=-1);
var is\\_android4 = (agent.indexOf('android\ 4')!=-1);
var is\\_chrome = (agent.indexOf('chrome')!=-1);
if (is\\_iphone) { iosPlayer(); }
else if (is\\_ipad) { iosPlayer(); }
else if (is\\_ipod) { iosPlayer(); }
else if (is\\_android1) { rtspPlayer(); }
else if (is\\_android2) { rtspPlayer(); }
else if (is\\_android4) { a4Player(); }
else if (is\\_blackberry) { rtspPlayer(); }
else if (is\\_iemobile) { rtspPlayer(); }
else { flashPlayer(); }
function iosPlayer()
{
var player=document.getElementById(container)
player.innerHTML='<VIDEO '+
' SRC="'+cupertinourl+'"'+
' HEIGHT="'+fixedheight+'"'+
' WIDTH="'+fixedwidth+'"'+
' poster="poster.png"'+
' title="Live Stream"'+
' CONTROLS>'+
'</video>';
}
function windowsPlayer()
{
// Need to add code here for silverlight player in Windows Phone to support the 12 users that actually have one. Until then use rtspPlayer();
}
function a4Player()
{
var player=document.getElementById(container)
player.innerHTML='<A HREF="'+cupertinourl+'">'+
'<IMG SRC="player.png" '+
'ALT="Start Mobile Video" '+
'BORDER="1" '+
'WIDTH="'+width+'">'+
'</A>';
}
function dashPlayer()
{
// Reserved for future use
}
function rtspPlayer()
{
var player=document.getElementById(container)
player.innerHTML='<A HREF="'+rtspurl+'">'+
'<IMG SRC="player.png" '+
'ALT="Start Mobile Video" '+
'BORDER="0" '+
'WIDTH="'+width+'">'+
'</A>';
}
function flashPlayer()
{
//If using JW6 Premium or Enterprise, you can also use the cupertinourl here.
jwplayer(container).setup({
width: width,
aspectratio: aspect,
file: rtmpurl,
autostart: false
});
}