JavaScript plugin: Playlist Use HTML and CSS to layout your video clips

Quick example

Click on the player or the playlist entries to see this plugin in action. You can also see this example as a standalone page. View its source code to see how things are done. You can freely copy/paste this code to your site.

Download (Version 3.0.8)

Features

HTML coding

Here is the HTML code from the example above. We use a "template" for each clip in the playlist. The playlist itself is defined in the Flowplayer configuration:

<div class="clips" style="float:left">
	
	<!-- single playlist entry as an "template" -->
	<a href="${url}">
		${title} <span>${subTitle}</span>
		<em>${time}</em>
	</a>
	
</div>
		
<!-- the player using splash image -->
<a class="player plain" id="player1" style="float:left">
	<img src="http://static.flowplayer.org/img/player/btn/play_text_large.png" />
</a>

<!-- let rest of the page float normally -->
<br clear="all"/>

JavaScript coding

Here is the JavaScript configuration for the player. All entries in the playlist are automatically placed inside the playlist. See how the clip properties title, subTitle and time are inserted into our HTML template. All the properties of the common clip are also inserted.

// wait for the DOM to load using jQuery
$(function() {
	
	// setup player normally
	$f("player1", "http://releases.flowplayer.org/swf/flowplayer-3.2.2.swf", {
	
		// clip properties common to all playlist entries
		clip: {
			baseUrl: 'http://blip.tv/file/get',
			subTitle: 'from blib.tv video sharing site',
			time: '20 sec'
		},
		
		// our playlist
		playlist: [
			{
				url: 'KimAronson-TwentySeconds59483.flv',
				title: 'Palm trees and the sun'
			},	
			{
				url: 'KimAronson-TwentySeconds58192.flv',
				title: 'Happy feet in a car'
			},	
			{
				url: 'KimAronson-TwentySeconds63617.flv',
				title: 'People jogging'
			}
		],
		
		// show playlist buttons in controlbar
		plugins: {
			controls: {
				playlist: true
			}
		}
	});
	
	/*
		here comes the magic plugin. It uses first div.clips element as the 
		root for as playlist entries. loop parameter makes clips play
		from the beginning to the end.
	*/
	$f("player1").playlist("div.clips:first", {loop:true});
	
});

CSS coding

Here is our external CSS file. The entire layout is done using CSS common practices. This allows you to create radically different "skins" and functionality. The CSS coding is actually the biggest challenge and it helps if you understand this powerful "language".

Manual configuration

Here is another playlist implementation. This time the playlist is configured manually which means that the playlist entries are defined with HTML and are not specified in our JavaScript-based configuration. Below is a working example. You can also view this example as a standalone version.

HTML Coding

This time the playlist is defined inside the HTML-based playlist:

<!-- configure entries inside playlist using standard HTML -->
<div class="clips petrol" style="float:left">
	
	<!-- single playlist entry -->
	<a href="KimAronson-TwentySeconds59483.flv" class="first">
		Palm trees and the Sun
		<span>HTTP streaming</span>
		<em>0:20 min</em>
	</a>
	
	<a href="KimAronson-TwentySeconds58192.flv">
		Happy feet inside a car
		<span>HTTP streaming</span>
		<em>0:20 min</em>	
	</a>
	
	<a href="KimAronson-TwentySeconds63617.flv">
		Park side life
		<span>HTTP streaming</span>
		<em>0:20 min</em>	
	</a>
	
</div>
		
<!-- player container and a splash image (play button) -->
<a class="player plain" id="player2"  style="float:left">
	<img src="http://static.flowplayer.org/img/player/btn/play_text_large.png" />
</a>

<!-- let rest of the page float normally -->
<br clear="all"/>

JavaScript coding

Now the playlist entries are not configured in the player making our JavaScript much shorter:

$(function() {
	
	// setup player without "internal" playlists
	$f("player2", "http://releases.flowplayer.org/swf/flowplayer-3.2.2.swf", {
		clip: {baseUrl: 'http://blip.tv/file/get'} 
		
		
	// use playlist plugin. again loop is true
	}).playlist("div.petrol", {loop:true});
	
});

We use the same CSS stylesheet as in our first example. We used the div class name "petrol" as our root element. This gave us the possibility of visualizing our playlist a little differently. You may want to play around with both of the playlists on this page. Please notice that within a playlist only one clip is playing at a time.

Manual configuration and autoplay

If you want your player to automatically start playing when your page loads, then you'll have to remove all content inside the player container and add a href attribute for it that corresponds to the first entry in the playlist. In our previous example the container should look like this:

<!-- player container without nested content and with an href attribute -->
<a class="player" id="player" style="float:left"
	href="KimAronson-TwentySeconds59483.flv"></a>

Take a look at the manual playlist with autoplay as a standalone page.

Adding and removing entries dynamically

In the manual configuration you can add and remove entries in the playlist on-the-fly. This can be achieved with the jQuery append and remove methods. The trick here is to use jQuery live events - so you'll need version 1.3.1 or greater for this to work. Here are examples of the playlist manipulation functions:

/* adds new entry into playlist */
function newEntry() {

	// uses normal jQuery append method. no additional coding
	$("#myplaylist").append(
		'<a href="KimAronson-TwentySeconds73213.flv">' +
			'Dynamically added playlist entry' +
			'<span>From JavaScript</span>' +
			'<em>0:21 sec</em>' +
		'</a>'
	);
}

/* standard jQuery method to remove last entry from the playlist */
function removeEntry() {
	$("#myplaylist a:last").remove();
}

You can see a working example on the following standalone example page.

Playlist configuration

You can configure your playlist with different configuration variables. Here are all the parameters you can supply to the playlist with their default values:

.playlist("playlistContainer",  {

	// CSS class name of a playing entry
	playingClass: 'playing',

	// CSS class name of a paused entry
	pausedClass: 'paused',

	// CSS class name for an entry that is loading
	progressClass:'progress',

	// if true, then each clip is advanced to the next clip when it ends
	loop:false,

	/*
		when set to true and the splash image is clicked, then the first clip is played.
		this has an effect on the manual configuration only
	*/
	playOnClick: true
});

When looping is enabled and the last clip is entered, the playlist goes to the first clip in the manual configuration. However, in the normal configuration when the last clip ends it will show the button "Play again". After pressing "Play again", the whole playlist is played from the beginning.

As you can see, most of the configuration parameters are related to CSS class names which are changed according to the player's current state. This allows you to make each playlist entry look and behave differently upon each stage. Of course, you can have your own event handlers as well, as is documented here.

Download

Please right-click and choose "Save link as..." (or similar)

See the version history for this tool.

NOTE We are no longer providing packed scripts. Althought they may have smaller file size they offer less performance than minified scripts. See details from JavaScript Library Loading Speed.

The scripts shown here depend on the jQuery JavaScript library which can be downloaded from Google Code. It must be included on the page before any other JavaScript code.

You can alternately include jQuery directly from Google API's by including this script block before all other scripts:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

This file is located on a content delivery network (CDN) so it's served fast and it is also GZIP:ed on your behalf dramatically reducing it's file size.

Found a bug?

If you encounter problems in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.

Flowplayer Twitter feed