This is a message.

In-stream clips and playlists

Learn how to use playlists with in-stream clips

standalone demo

This demo continues from this instream playlist demo which has an internal playlist combined with two in-stream playlists. This demo shows how this configuration works with the playlist plugin

Flowplayer configuration

The configuration for this demo is same as that of the complex in-stream playlist demo.

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.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://stream.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://stream.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

Playlist configuration

The playlist is simply plugged into the player. You can have a look at the standalone example for the HTML code.

$f().playlist(".entries", {loop: true});

JavaScript