I’ve searched all over Flowplayer’s Forums with very little luck. I’m hoping someone here can help.
Has anyone had success getting Flowplayer to work with RTMP and the iPad plugin? I can view my video fine in Flash, but on iDevices all I get is a black screen. I know the video will play on iDevices because if I plug the url directly into Safari it plays no problem.
Here’s the code I’m using. Also, I’m running this on EC2 if that matters.
<script type="text/javascript" src="http://myserver.com/js/flowplayer/flowplayer-3.2.6.min.js"></script>
<script type="text/javascript" src="http://myserver.com/js/flowplayer/flowplayer.ipad-3.2.2.min.js"></script>
<a
id="player"
href="rtmp://myserver.com:1935/vods3/_definst_/mp4:amazons3/mybucket/video.mp4"
style="display:block;width:600px;height:450px;">
</a>
<script type="text/javascript">
window.onload = function(){
$f("player", "http://myserver.com/js/flowplayer/flowplayer-3.2.7.swf", {
clip: {
url: 'mp4:video.mp4',
provider: 'rtmp',
autoPlay: false,
ipadUrl: 'http://myserver.com:1935/vods3/_definst_/mp4:amazons3/mybucket/video.mp4/playlist.m3u8',
},
plugins: {
rtmp: {
url: 'http://myserver.com/js/flowplayer/flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://myserver.com:1935/vods3/_definst_'
}
},
canvas: {
background: 'url(http://myserver.com/poster.jpg)',
backgroundGradient: 'none'
}
}).ipad();
};
</script>
Thanks!
Brian
u dont need flowplayer for ipad … just lint this url http://myserver.com:1935/vods3/definst/mp4:amazons3/mybucket/video.mp4/playlist.m3u8 onto your web page , and after click on ipad will be opened player and play your video …
ipad not opening flash …
Try this:
<script type="text/javascript">
window.onload = function(){
$f("player", "http://myserver.com/js/flowplayer/flowplayer-3.2.7.swf", {
clip: {
url: 'mp4:amazons3/mybucket/video.mp4',
provider: 'rtmp',
autoPlay: false,
ipadUrl: 'http://myserver.com:1935/vods3/_definst_',
},
plugins: {
rtmp: {
url: 'http://myserver.com/js/flowplayer/flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://myserver.com:1935/vods3/_definst_'
}
},
canvas: {
background: 'url(http://myserver.com/poster.jpg)',
backgroundGradient: 'none'
}
}).ipad();
};
</script>
I’m not sure then. Did you post on Flowplayer forum?
Richard
I would post there too. I’ll see if anyone else here has insight. Flowplayer is great, recommended (we have guides for it) but I don’t use it as much.
Richard
Thanks for the update and posting. I’m sure others (e.g. myself) will find it useful. Looks native for Flowplayer, their javascript hierarchical objects implementation (attractive but fragile and a little complicated).
Richard
Thanks for the reply Richard, same result though I’m afraid. Plays fine in flash, but just produces a black box on iDevices.
No, I didn’t. After spending several hours searching for answers on their forums and seeing the lack of answers/follow-up by their support staff, I decided to post here instead because you guys are always so great with your support. Perhaps it would be worth a shot…
Well, this works… wish there were a more ‘native’ way of doing it though.
// if iDevice
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
if ( $iPod || $iPhone || $iPad ) {
$out = '<video id="player"
width="'. $width .'"
height="'. $height .'"
src="http://myserver.com:1935/vods3/_definst_/'.$src.'/playlist.m3u8"
poster="'. $poster .'">
</video>';
// if NOT iDevice
}else{
$out = '<script type="text/javascript" src="http://myserver.com/js/flowplayer/flowplayer-3.2.6.min.js"></script>
<script type="text/javascript" src="http://myserver.com/js/flowplayer/flowplayer.ipad-3.2.2.min.js"></script>
<a
id="player"
href="http://myserver.com:1935/vods3/_definst_/'.$src.'"
style="display:block;width:'.$width.';height:'.$height.';">
</a>
<script type="text/javascript">
window.onload = function(){
$f("player", "http://myserver.com/js/flowplayer/flowplayer-3.2.7.swf", {
clip: {
url: \''.$src.'\',
provider: \'rtmp\',
autoPlay: false,
},
plugins: {
rtmp: {
url: \'http://myserver.com/js/flowplayer/flowplayer.rtmp-3.2.3.swf\',
netConnectionUrl: \'rtmp://myserver.com:1935/vods3/_definst_\'
}
},
canvas: {
background: \'url('.$poster.')\',
backgroundGradient: \'none\'
}
});
};
</script>';
}
return $out;
Did you ever get to the bottom of this? I’ve encountered the same problem.
I’ve identified what’s going wrong, but not why: Once you specify an “ipadUrl” it stops adding a src= parameter to the video tag, so the iDevice never knows what video to play.
I’ve worked around it for now by using Javascript to add a src after Flowplayer has finished with it, but I’d like to find out what I (we) are doing wrong and do it properly.
setTimeout("fixVideo()",50);
function fixVideo() {
if (document.getElementById('player_api').innerHTML=='') {
document.getElementById('player_api').innerHTML = '<source src="http://myserver.com:1935/vod/_definst_/mp4:video.mp4/playlist.m3u8">';
}
}