Full featured HTML playlist

Version 0.1, 05/29/2008, Tero Piirainen

The Goal

This tutorial combines the forces from flow.playlist and jquery.scrollable and we end up having following scrollable playlist implementation.

Playlist entries are now scrollable. You can use arrow keys, mousewheel and those tiny gray buttons to scroll up and down the list.

The Code

note: Working example of this feature is included into our latest build which can be downloaded here.

HTML coding

<!-- root element of the playlist -->
<div class="playlist">

	<!-- playlist items -->
	<div class="items">
	
		<a href="../video/tap.flv">
			<p>Lorem ipsum dolor sit amet, consectetuer</p>		
			<p class="time">1:32 sec</p>
		</a>	
		
		<a href="../video/tap.flv">
			<p>Lorem ipsum dolor sit amet, consectetuer</p>		
			<p class="time">1:32 sec</p>
		</a>			
		
		<!-- ... rest of the items goes here ... -->
		
	</div>
	
	<!-- navigator is auto generated inside this tag -->
	<div class="navi"></div>
	
</div>

JavaScript coding

This is our simple JavaScript setup. We recommend you to study both of these tools separately to fully understand what you can do with them.

// setup scrollable playlist when page is scriptable 
$(document).ready(function() {			

	// setup Flowplayer playlist from <div.items/>
	$("div.items").playlist(
	
		// flash parameters
		"../video/FlowPlayerDark.swf",
		
		// flowplayer configuration
		{initialScale:'scale'}, 
		
		// playlist configuration
		{loop:true}
	);
	
	// make playlist scrollable   
	$("div.playlist").scrollable({size:3});	

});

CSS coding

Here is our linked playlist.css file. All visuals and layout is done with this CSS file as it should be. This allows you to make radically different looks and feels. CSS coding is actually the biggest work and it helps if you master this powerfull technology.

Dependencies

Implementation depends on following external scripts

1. jQuery JavaScript library which helps you to write code that works smoothly on different browsers.
2. jQuery mousewheel extension that enables navigation with mousewheel. you can simply omit this script if you don't want mousewheel functionality.
3. jQuery scrollable extension that makes playlist scroll. this is a general purpose script implemented by me.
4. flashembed.js for embedding Flash into the page
5. flow.playlist.js is our playlist implementation. it is made as a jQuery plugin.