How to create a simple Flash Video Jukebox using PHP

Recently, we found a project that contained nearly 200 video clips. As part of the development process we needed a way to quickly review the clips that had been selected for the piece. I decided to make a quick and dirty Flash video jukebox that used PHP to generate the XML for the Flash movie. A user could then visit the web page and chose any of the videos and easily watch the desired clip.So, how did I do this? It’s a pretty simple bit of code, really. First the PHP (click to download the source):

<videos><?php
if ($handle = opendir('videos')) {
 while (false !== ($file = readdir($handle))) {
 if ($file != "." && $file != ".."){
 echo "t<video>$file</video>n";} 
}closedir($handle);} ?>

In that snippet, I create the basic element and then open the directory that contains the videos with PHP. I then loop over that directory reading all the files in and then outputting them into the XML as “video” elements that contain the name of the file.Next the Flash… I’ll need to load the XML, obviously and parse it. I like to use Darron Schall’s method for parsing the XML, so I’ll be using that here as well… After it’s loaded and ready, I set the created array to be a data provider for a combo box on the stage:

var filesXML:XML = new XML(); 
filesXML.ignoreWhite = true;
var video_arr:Array = new Array();
 // After loading is complete, trace the XML object.filesXML.onLoad = function(success) { if (success) {var startTime = getTimer();
var videos_xml = filesXML.firstChild;
for (var i = 0; i < videos_xml.childNodes.length; i++) {
 var videoData = new Object(); 
for (var j = 0; j < videos_xml.childNodes[i].childNodes.length; j++) { videoData[videos_xml.childNodes[i].nodeName] = videos_xml.childNodes[i].firstChild.nodeValue; }video_arr.push(videoData); 
} //trace("Total parse time: " + (getTimer()-startTime)) 
} else { trace("Error loading playlist."); 
} // clean up after ourselves 
 delete playlist_xml;
 combo_cb.dataProvider = video_arr; } ;

After that’s ready, I wrap it up by creating the actions for a load button, the FLV playback component and the combo box.

my_button.onRelease = function() { //myPlayer.contentPath = combo_cb.selectedItem; 
file_lbl.text = _root.combo_cb.selectedItem;
 var item_obj:Object = combo_cb.selectedItem;
 var i:String; for (i in item_obj) { trace(i + ":t" + item_obj[i]); file_lbl.text = item_obj[i]; }myPlayer.play("videos/" + item_obj[i]);
 }myPlayer.addEventListener("cuePoint", cplistenerObject); 
var cbListener:Object = new Object(); 
cbListener.change = function(evt_obj:Object) { var item_obj:Object = combo_cb.selectedItem; 
var i:String;for (i in item_obj) { trace(i + ":t" + item_obj[i]);
 } trace(""); }; 
combo_cb.addEventListener("change", cbListener); // Load the XML into the filesXML object.filesXML.load("dirListXML.php"); 
stop();

That’s about it. You’ll now be able to choose a video and quickly see it load in the FLV Playback component. Dead simple.You can check it out here. You can also download a copy of the FLA here. In the next few days I’ll be expanding on this to show how we used Flash to debug and track metadata in the many videos we had to manage.