HotPotatoes Tutorials and How-to's

You are here: Home » Tutorials » for HotPotatoes » Flash Video II - SWFObject 2 with a Playlist.xml

Flash Video II - Using SWFObject 2 and a Playlist.XML for FLV

Posted by Stan Bogdanov on 27 May 2008 - 22:12
Last updated 21 December 2009 - 07:42

Demo and Code

Demo with a playlist xml file

UFO and SWFObject authors have joined effort to write SWFObject 2. It's officially out and aims to be the ultimate in embedding flash content. After you've read the documentation and different implementation possibilities, you may want to start with the online code generator.

Get Adobe Flash player

The Code

In the head of the document write

In the body of the document, where you want the Flash movie to appear, write only

  <div id="noFlash">
 <a href="http://www.adobe.com/go/getflashplayer">
 Get Adobe Flash player
 </a>
  </div>

playlist.xml

A sample XML playlist will look like this:

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
 <trackList>
   <track>
    <title>Movie Title</title>
     <creator>Stan Bogdanov</creator>
       <location>http://www.server.com/flashfolder/your_file_1.flv
       </location>
	 <info>http://www.your-server.com</info>
   </track>
   <track>
   <title>Another Movie Title</title>
     <creator>Stan Bogdanov</creator>
	<location>http://www.server.com/flashfolder/your_file_2.flv
        </location>
	  <info>http://www.your-server.com</info>
   </track>
 </trackList>
</playlist>

Notes

If you decide to start with the sample code above, you'll have to make certain changes.
- swfobject/swfobject.js - this is the folder with the swfobject.js script
- flashfolder/ - the folder with the xml playlist
- jw_flv_playlist.xml - the XML file with info (data, paths, titles, etc.) of the flv files
- flvplayer.swf - the .swf file (container) which plays the .flv movie
- expressInstall.swf - if used, will probably be in the swfobject/ folder
- width, height, displayheight - your movie values
- backcolor, frontcolor, lightcolor - your colour values for the swf container
- displayheight values must be bigger than the height of the movie (calculate yours) so as to allow for the list of titles to appear at the bottom.

For the full list of flashvars supported by Jeroen Wijering's Mediaplayer see http://www.jeroenwijering.com/?item=Supported_Flashvars.

Using SWFObject v2 with Flash Video in HotPotatoes

Now it's much easier to embed the flash movie in a HotPotatoes exercise.
Open any of the HotPotatoes, go to Add Reading Text and put the placeholder div id="noFlash" ... like in the screenshot, the code running as a single line.

Then, go to Configuration/Custom and paste the javascript code in the text field Code for insertion into the head tag, like this:

Finally, generate your exercise. Make sure you have all paths to files correctly referenced, and all necessary files uploaded. That's it. Don't forget to drop a comment, ask questions or ask for help if you have problems with the code implementation.