Mixed content streaming
This example shows how to set up a playlist of audio and video files that are streamed using RTMP.
HTML
Below is the player container and the playlist container. Inside the playlist we have a "template" for each entry in the playlist:
<!-- player container-->
<div id="player"> </div>
<!-- the playlist -->
<div id="playlist" class="clearfix" style="display:none">
<div>${title}</div>
</div>
<!-- let rest of the page float normally -->
<br clear="all" />
Configuration
Note how we animate the controlbar to more prominence for the audio clip.
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
// the playlist
playlist: [
{title: 'FLV file', url: 'Extremists'},
{title: 'Audio file', url: 'mp3:fake_empire-cbr'},
{title: 'MP4 file', url: 'mp4:bbb-1200'}
],
clip: {
// each clip of the playlist uses the rtmp plugin
provider: 'rtmp',
// configure and animate the controlbar according to clip type
onBegin: function (clip) {
var isVideo = clip.type === 'video';
this.getControls().animate({
// default controlbar position and height for video,
// larger controls over screen for audio
height: isVideo ? 26 : 50, bottom: isVideo ? 0 : "30%"
}, 2000, function () {
// enable fullscreen button for video
// in the optional callback function of the animation
this.setWidgets({fullscreen: isVideo});
});
}
},
// the rtmp plugin
plugins: {
rtmp: {
url: "http://releases.flowplayer.org/swf/flowplayer.rtmp-3.2.10.swf",
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st',
// needed to obtain the duration of the audio file
durationFunc: 'getStreamLength'
},
// include playlist buttons in the controlbar
controls: {
playlist: true,
autoHide: false
}
}
}).playlist("#playlist", {loop: true});
$("#playlist").show();