Scripting example: Simple Playlist

Version 0.3, 16.05.2008, Tero Piirainen

The Goal

Flowplayer object that can be controlled via playlist entries on the right.

Features

• The playlist is constructed with standard HTML tags and attributes. JavaScript is not mixed with HTML to keep code clean. Coders call this "unobtrusive" JavaScript.

• Playlist entries are configured into playlist not into Flowplayer. Playlist links are normal HTML links having following syntax:

  <a href="[PATH TO PLAYLIST CLIP]">[ANY HTML]<a>

• Flowplayer flash component is not initially loaded to make overall page load faster. Instead it is loaded when user clicks on the splash image or the playlist entries.
• You can make this playlist vertical, horizontal or scrollable. It's up to you (and your coding skills). Playlist entries can contain any HTML including text and images.
• This code is tested with IE6, IE7, Safari and Firefox but it should work on other browsers as well.

The Solution

The above example is presented here without any modifications or shortcuts. You can see the same code running from the page source. There are two included files style.css that has some primitive styling and flashembed.js that is used to embed our Flash object and these files are not discussed here. Make sure that you are using at least version 0.27 from flashembed.js script.

We start with our simple HTML structure

<!-- 
	DIV element that contains our player. 
	It is inially loaded with a splash image. 
-->
<div id="player">
	<img src="img/2m.jpg" border="0" id="splash" />
</div>

<!-- the playlist using standard HTML -->
<div id="playlist">
	
   <!-- first entry launches a video file -->
   <a href="http://community.flowplayer.org/video/honda_commercial.flv">
      <img src="img/3.jpg" border="0" />
   </a>
   
   <!-- second entry launches an image -->	
   <a href="img/1m.jpg">
      <img src="img/1.jpg" border="0" />
   </a>
   
    <!-- third entry launches an image as well -->		
   <a href="img/2m.jpg">
      <img src="img/2.jpg" border="0" />
   </a>
	
</div>

<!-- 
  above elements are set side by side using float:left setting 
  in css and this tag ends this floating behaviour. 
  this is probably the most useful HTML tag I know.
-->
<br clear="all" />

JavaScript code

Here is the JavaScript code that can be placed anywhere on the page. Anyway it is recommeded that you put this inside head tag of your page. This script creates our flowplayer instance and makes playlist entries work.

// Flowplayer configuration (less buttons and wicked background color)
var playerConfig = {
   controlBarBackgroundColor: '0x99cddc',
   initialScale:'scale',
   showMenu:false,
   showVolumeSlider:false,
   showMuteVolumeButton:false,
   showFullScreenButton:false,
   controlBarGloss:'high'
}
 

window.onload = function() {

   // variable that holds the player API. it is initially null
   var flowplayer = null; 
   
   /************* THE PLAYLIST ***************/
   
   // loop all links within DIV#playlist and customize their onClick event 
   var links = document.getElementById("playlist").getElementsByTagName("a"); 
   
   for (var i = 0; i < links.length; i++) {

      links[i].onclick = function() { 
   
         /*
          * set links href attribute as the videoFile property in our 
          * configuration. of cource you can modify other properties as well
          */
         playerConfig.videoFile = this.getAttribute("href");
         
         // if flowplayer is not loaded. load it now.
         if (flowplayer == null) {
         
            // create Flowplayer instance into DIV element whose id="player"
            // Flash API is automatically returned (flashembed.js ver. 0.27)
            flowplayer = flashembed("player", 
               {src:"../../video/FlowPlayerLight.swf", bgcolor:'#6F7485'}, 
               
               // supply our (modified) configuration to the player
               {config: playerConfig}
            ); 
            
         // flowplayer is already loaded - now we simply call setConfig()
         } else {    
            flowplayer.setConfig(playerConfig); 
         }
         
         // disable link's default behaviour
         return false; 
      }     
   }
   
   // when clicks on the player it triggers our first playlist entry
   document.getElementById("player").onclick = function()  {
      links[0].onclick();
   }
	
	/* 
		If you want your video to start when your 
		page loads then uncomment next line 
	*/   
	// document.getElementById("player").onclick();
	
}

Now we have working Flowplayer with associated playlist.