This is a message.

A complex in-stream playlist

Flowplayer allows you to stitch videos with its flexible playlist interface

standalone demo

Flowplayer can be configured with a playlist that has an unlimited number of clips. In addition to that, each clip can have its own in-stream playlist. The above demo is an example of such playlist combination.

This is what happens here:

  1. The 1st clip lasts for 10 seconds. On the 3rd second, you'll see one in-stream clip that lasts for 3 seconds and uses customized control bar settings
  2. The 2nd clip lasts for 20 seconds. Before the video starts, you'll see a 4 second long in-stream "pre-roll".
  3. The 3rd and 4th clips are normal without any special configuration.

Configuration

The configuration is quite straightforward. Here you can see a playlist and two in-stream playlists:

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
// properties that are common for parent and instream clips
clip: {
baseUrl: 'http://edge.flowplayer.org'
},
 
// 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://edge.flowplayer.org/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://edge.flowplayer.org/flowplayer-700.flv',
duration: 4
}]
},
 
// 3rd and 4th clips do not have any instream playlists
{url: 'KimAronson-TwentySeconds70930.flv', title: 'Eating sushi'},
{url: 'KimAronson-TwentySeconds73213.flv', title: 'Things on the table'}
 
],
 
// show playlist buttons on the controlbar + a little customization
plugins: {
controls: {
url: "flowplayer.controls-tube-3.2.16.swf",
playlist: true,
fullscreen: false,
volume: false
}
}
 
});

JavaScript

Follow this link to see this same demo configured with a visible playlist plugin.