Wowza rtmp livestream and vod for ios example?
I have my own wowza server setup and I am having a horrible time trying to come up with a snippet of code that will work across all browsers including iphone/ipad.
For some reason, the code I am trying to use works in browsers and the iphone, but not the ipad. The ipad shows no video player at all.
(on the iphone, when the player is clicked the phone switches over to the built in player and works that way).
Here is one example snippet I am using:
bc.. <div id="player">You need Flash or iOS to play this stream</div>
<script type="text/javascript">
jwplayer("player").setup({
height: 270,
players: [{
config: {
file:'livestream',
streamer:'rtmp://server-ip:1935/jgm-liverecord'
},
type: 'flash',
src: '/jw/player-5-5.swf'
},{
config: {
file: 'http://server-ip:1935/jgm-liverecord/livestream/playlist.m3u8'
},
type: 'html5'
}],
plugins: {
'livestream': {
end: 1314921600,
start: 1314907200,
title: 'Live broadcast test'
}
},
width: 480
});
</script>
Here is another example that I have tried but does not work on the ipad:
bc.. <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("videoframe")
player.innerHTML='<video '+
'HEIGHT="338" '+
'WIDTH="600" '+
'poster="http://website.com/image.jpg" '+
'title="Live Stream">'+
'<source src="http://server-ip:1935/jgm-liverecord/livestream/playlist.m3u8" type="video/mp4"/> '+
'</video>';
}
function rtspPlayer()
{
var player=document.getElementById("videoframe")
player.innerHTML='<A HREF="rtmp://server-ip:1935/jgm-liverecord/livestream">'+
'<IMG SRC="http://website.com/image.jpg" '+
'ALT="Start Mobile Video" '+
'BORDER="0" '+
'HEIGHT="480" '+
'WIDTH="640">'+
'</A>';
}
function windowsPlayer()
{
var player=document.getElementById("videoframe")
player.innerHTML='<A HREF="mms://windows/pubpoint">'+
'<IMG SRC="http://website.com/image.jpg" '+
'ALT="Start Windows Mobile Video" '+
'BORDER="0" '+
'HEIGHT="480" '+
'WIDTH="640">'+
'</A>';
}
function oldJWPlayer()
{
var so = new SWFObject('/jw/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://server-ip:1935/jgm-liverecord');
so.addVariable('file','livestream');
so.addVariable('controlbar','over');
so.addVariable('dock','true');
so.write('videoframe');
}
function newJWPlayer()
{
var so = new SWFObject('/jw/player-5-5.swf','mpl','600','338','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://server-ip:1935/jgm-liverecord');
so.addVariable('file','livestream');
so.addVariable('controlbar','over');
so.addVariable('dock','true');
so.write('videoframe');
}
</SCRIPT>
**I am guessing that this is a somewhat 'normal' request, as all I am trying to do is use jw/html5 to show a live video stream from Wowza.