More complex instream playlist Configuration - Demo 8 / 8
Introduction
Flowplayer can be configured with a playlist that has unlimited amount of clips. In addition to that each clip can have it's own instream playlist. Here is an example of such playlist combination. Here is what happens
- The 1st clip lasts 10 seconds. On the 3rd second, you'll see one instream clip that lasts 3 seconds and uses customized controlbar settings.
- The 2nd clip lasts 20 seconds. Before the video starts, you'll see a 4 second long instream "pre-roll".
- The 3rd and 4th clips are normal clips without any special configuration.
Flowplayer configuration
The configuration is quite straightforward. You can see a playlist and two instream playlists:
flowplayer("player", "/swf/flowplayer-3.1.5.swf", {
// properties that are common for parent and instream clips
clip: {
baseUrl: 'http://blip.tv/file/get'
},
// normal playlist
playlist: [
// 1st clip
{
url: 'KimAronson-TwentySeconds63617.flv',
duration: 10,
autoPlay: false,
autoBuffering: true,
title: 'Green grass',
// instream playlist with one clip, starts after 3 seconds
playlist: [{
url: 'http://flowplayer.org/video/flowplayer-700.flv',
duration: 3,
position: 3,
// customized controlbar settings for instream clip
controls: {
backgroundColor: '#95A1AE',
progressColor: '#00ffff',
bufferColor: '#CCFFFF',
playlist: false,
enabled: {scrubber: false}
}
}]
},
// 2nd clip
{
url: 'KimAronson-TwentySeconds59483.flv',
title: 'Palm trees',
// instream playlist with one clip, starts before the main clip.
playlist: [{
url: 'http://flowplayer.org/video/flowplayer-700.flv',
duration: 4
}]
},
// 3rd and 4th clips do not have any instream playlists
{url: 'KimAronson-TwentySeconds64268.flv', title: 'Hotel Room 213'},
{url: 'KimAronson-TwentySeconds75235.flv', title: 'Two little girls'}
],
// show playlist buttons on the controlbar + a little customization
plugins: {
controls: {
url: 'flowplayer.controls-tube-3.1.5.swf',
playlist: true,
fullscreen: false,
volume: false
}
}
});Follow this link to see this same demo configured with a visible playlist plugin.
Take a look at a standalone version of this demo. View its source code to get things going on your page.