This is a message.

Mixed content streaming

Learn how to create an RTMP playlist with audio and video clips

 

standalone demo

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">&nbsp;</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" />

HTML

Configuration

Note how we animate the controlbar to more prominence for the audio clip.

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.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: "flowplayer.rtmp-3.2.13.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();

JavaScript