Flash Audio and Video with an XML Playlist

Demo with a playlist xml file and SWFObject v1.5

Get the Flash Player to see this player.

The Code

<script type="text/javascript" src="swfobject.js"></script>
<div id="player2" style="margin-left:auto;margin-right:auto;text-align:center;display:block;"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<script type="text/javascript">
	var s2 = new SWFObject("player.swf","playlist","340","455","10");
	s2.addParam("allowfullscreen","true");
	s2.addVariable("file","playlist.xml");
	s2.addVariable("backcolor","0x000000");
	s2.addVariable("frontcolor","0xcccccc");
	s2.addVariable("lightcolor","0x99cc00");
	s2.addVariable("width","340");
	s2.addVariable("height","455");
	s2.addVariable("displayheight","340");
	s2.write("player2");
</script>

The playlist.xml

Part of my playlist.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
     <trackList>
          <track>
		<title>Преображение (Transfiguration)</title>
		<creator>Исихия 2001 (Isihia)</creator>
		<location>listening-1.mp3</location>
		<info>http://isihia.net</info>
		<image>isihia.gif</image>
	 </track>

          <track>
		<title>Господи (God)</title>
		<creator>Исихия 2001 (Isihia)</creator>
		<location>listening-2.mp3</location>
		<info>http://isihia.net</info>
		<image>isihia.gif</image>
	 </track>		
     </trackList>
</playlist>

Notes

Note these:
- swfobject.js - this is the swfobject.js script
- playlist.xml - the XML playlist file with info (data, paths, titles, etc.) of the .flv, .mp3 or .mp4 files
- player.swf - the .swf file (container) which plays the .flv movie, .mp3 or mp4 files
- width, height, displayheight - your movie values
- backcolor, frontcolor, lightcolor - your colour values for the swf container
- height value must be bigger than the displayheight of the movie (calculate yours) so as to allow for the list of titles to appear at the bottom.

Using SWFObject v1.5 with Flash Video in HotPotatoes

Open any of the HotPotatoes, go to Add Reading Text and put the code there.

Then, go to Configuration/Custom and paste the javascript code in the text field Code for insertion into the head tag, like this: <script type="text/javascript" src="swfobject.js"></script>

Finally, generate your exercise. Make sure you have all paths to the files correctly referenced, and all necessary files uploaded.

Some useful tips:

First, use absolute absolute urls for best results both in the exercise and in the playlist.xml.

Second, make sure the code runs as a single line without any carriage returns!

That's it. Don't forget to drop a comment, ask questions or ask for help if you have problems with the code implementation.

Discuss

Tweets Collection