You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Playlist plugin with different media types JavaScript Plugins - Demo 12 / 13

Introduction

Here we have an internal playlist similar to this demo. This time we are using the playlist plugin which makes those playlist entries clickable beside the player.

${title} ${url} ${duration} seconds
Playlist splash image

HTML Code

Here is the HTML setup for this example. 

<!-- playlist style, look for its source code -->
<link rel="stylesheet" type="text/css" href="/css/playlist.css"/>

<!-- root element for playlist entries -->
<div class="clips" style="float:left;margin-right:15px">
	
	<!-- single playlist entry as an "template" -->
	<a>
		${title} <span>${url}</span>
		<em>${duration} seconds</em>
	</a>
	
</div>


<!-- player container with a splash image -->
<a id="flowplayer">
	<img src="/img/tutorial/tap-splash.jpg" alt="Playlist splash image" />
</a>

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

JavaScript code

The JavaScript code is identical to the first example with the exeption that we setup a title property to each entry so that we can label our playlist entries. Here is our modified JavaScript configuration with title attributes 

<script>
// setup player 
$f("flowplayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
	// properties that are common to both clips in the playlist
	clip: { 
		// by default clip lasts 5 seconds
		duration: 5		
	},
	
	// playlist with four entries
	
	playlist: [
		
        // JPG image
        {title: 'JPG Image', url: '/img/tutorial/tap-splash.jpg'}, 
        
        // SWF file
        {title: 'Flash file', url: 'http://releases.flowplayer.org/swf/clock.swf', scaling: 'fit'},
        
        // video
        {
            title: 'A video file',
            baseUrl: 'http://blip.tv/file/get',
            url: 'KimAronson-TwentySeconds58192.flv'
        },
        
        // audio, requires audio plugin. custom duration and a cover image
        {
            title: 'MP3 Audio', 
            url: 'http://releases.flowplayer.org/data/fake_empire.mp3', 
            duration: 25, 
            coverImage: 'http://releases.flowplayer.org/data/national.jpg' 
        }

	],
	
	// show playlist buttons in controlbar (in addition to other buttons)
	plugins:  {
		controls: {
			playlist:true		
		}
	}
	
// setup a HTML playlist to work inside DIV whose class name is "clips"
}).playlist("div.clips", {loop:true});	
</script>
Show this example as a standalone version. See it's commented source code to see how things are laid out.