A combined audio and video playlist with RTMP Streaming plugins - Demo 5 / 6
Introduction
This example shows how to setup a playlist of audio and video files that are streamed using RTMP.
${title}
HTML coding
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">
<div>${title}</div>
</div>
<!-- let rest of the page float normally -->
<br clear="all" />Flowplayer configuration
In this configuration, we have used an onBegin event which sets a background image for the container if there is a custom splash property defined for the clip. This is useful for audio clips.
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// the playlist
playlist: [
{title: 'FLV file', url: 'vod/demo.flowplayervod/Extremists.flv'},
{title: 'Audio file', url: 'mp3:vod/demo.flowplayervod/fake_empire.mp3',
splash: '/img/demos/national.jpg'},
{title: 'MP4 file', url: 'mp4:vod/demo.flowplayervod/bbb_640x360_h264.mp4'}
],
// each clip on the playlist uses the rtmp plugin
clip: {
provider: 'rtmp',
// set background image for the canvas if a clip has a "splash" property
onBegin: function(clip) {
this.getPlugin("canvas").css("backgroundImage", clip.splash ? clip.splash : "");
}
},
// the rtmp plugin
plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://rtmp01.hddn.com/play'
},
// include playlist buttons in the controlbar
controls: {
playlist: true
}
}
// initialize the visible playlist with a playlist plugin
}).playlist("#playlist");
Take a look at a standalone version of this demo. View its source code to get things going on your page. You can also see how the player and the playlist is styled with CSS.