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.11.swf", {
 
    // properties that are common for parent and instream clips
    clip: {
        baseUrl: 'http://stream.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://pseudo01.hddn.com/vod/demo.flowplayervod/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://pseudo01.hddn.com/vod/demo.flowplayervod/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: "http://releases.flowplayer.org/swf/flowplayer.controls-tube-3.2.11.swf",
            playlist: true,
            fullscreen: false,
            volume: false
        }
    }
 
});

JavaScript

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