JavaScript playlist with "youtube"- look JavaScript Plugins - Demo 5 / 13

Introduction

Here is another setup for a playlist. The goal of this demo is simply show the power of CSS and how it can be used to construct wildly different layouts for a playlist. Even the scrolling functionality here is done with a simple css property called overflow and there is no need to use the scrollable tool. Playlist look mimics a little bit of a YouTube playlists. However it is a "real" playlist so that clicking on the entry simply switches the video instead of going to a whole new page.

Again it's easy to toggle visibility of this playlist by calling jQuery's $("#playlist").slideToggle(). Try it

Here is an item in the playlist

And a subtitle. 0.22 Here is an item in the playlist

And a subtitle. 0.22 Here is an item in the playlist

And a subtitle. 0.22 Here is an item in the playlist

And a subtitle. 0.22 Here is an item in the playlist

And a subtitle. 0.22 Here is an item in the playlist

And a subtitle. 0.22 Here is an item in the playlist

And a subtitle. 0.22

The coding

Our HTML structure of the playlist is pretty basic stuff.

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

	<!-- single entry -->
	<a href="KimAronson-TwentySeconds59483.flv">
		<img src="/img/demos/thumb1.jpg" />
		<strong>Here is an item in the playlist</strong><br /><br />And a subtitle.		
		<em>0.22</em>
	</a>
	
	<!-- ... add more entries here ... -->
	
</div>

Also JavaScript setup is simple. This is actually all the code you need!

// setup player 
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {clip: {baseUrl: 'http://blip.tv/file/get'}
	
// setup playlist plugin for the root entry of our playlist 
}).playlist("#playlist");

Rest of the stuff is CSS coding.

DEMO AREA Scripting and JavaScript plugins

Flowplayer Twitter feed