How to create a simple Flash Video Jukebox using PHP

Filed under Flash, Uncategorized by Chad | 22 comments

NOTE: This example is a little old and uses Actionscript 2, though, if you know AS3 it could be easily converted.

Recently, we completed 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.

Posted on August 5, 2007

22 comments

1. James Sep 22

   Quick question, if you can forgive it’s newbness: Where do i put the php code? I created a “dirListXML.php” doc on the same level as my html & swfs and “video” folder that contains flv’s (on server w/php). The player loads up, but my dropdown doesn’t populate. What is humble grasshopper doing wrong, oh master?

   Also, you define item_obj as a var in both of lines 14 & 17. Is that right?

   Thanks for the awesome guide!

2. Chad Sep 22

   James,
   Thanks for trying things out. Yes, you are right, the dirListXML.php files simply goes in the same directory as the HTML and SWF file.

   If you have a browser with a debugging tool, can you check the status/loading of the XML file? Just to make sure it’s finding it? Safari has a great little window called “activity” thats pretty nice for doing this, though you can also do it with the Web Dev toolbar for Firefox or by simply placing a text field on the stage of the flash file and have it populate on the XML load success event.

   item_obj is indeed on both those lines… why, you ask? Cause I’m sloppy. good catch.

   if you are still having issues, be sure to check out the FLA listed in the post and if everything is still not quite making sense, email me.

3. Russ Haskell Sep 28

   Hi
   I am having problems like your posted comment. I created the ‘videos’ directory on the web server and loaded a few FLV files into the directory. Then I uploaded the ‘dirListXML.php’ file into the root along with the flash swf file embedded in an HTML page. I understand that the XML playlist file is created ‘on the fly’ by the PHP script. Is this correct? When I access the page the player comes up ok but no video loads and the selection drop down is not populated.
   The url is: http://www.abundantlifeschool.org/videogallery/

   Please help me solve this problem! The application looks like it is just the thing we need to be able to upload video clips into a directory and have them available to view on the website along with the ability to choose which video FLV to view.
   Thanks!

   Russ Haskell

4. Chad Sep 28

   Russ,
   By visiting your link at:
   http://www.abundantlifeschool.org/videogallery/

   I can see that you have the XML generating file at:
   http://www.abundantlifeschool.org/videogallery/dirListXML.php

   This file has PHP syntax error in it at line 5… Have you edited that PHP file? If so, you‚Äôll need to fix it… If not, let me know and I‚Äôll see if I need to fix something on my end.

   Thanks for checking out my site.

5. Chad Sep 28

   I think I have realized what was causing issues on my PHP for some people... Stupid Wordpress converted my double ampersands on line 5 from "&&" to "&&amp";

   To fix a PHP parsing errors with my code, please edit your line 5 from the "& amp ;& amp ;" to say "&&".

   Sorry bout that everyone.

   Chad

6. Macko Oct 30

   I tried the same, i even fixed the “&&” problem, but i still dont get anything on the drop down menu. I’m testing on my local host and when i tried to click the load buton i get this message:
   Error opening URL ‘file:///C|/Program%20Files/Apache%20Software%20Foundation/Apache2.2/htdocs/videos/undefined’

   PLEASE HELP i really need this script.

7. Bert Nov 15

   Hi, Chad

   I’m wondering whether the FLASH Script was created with AS 0.1 or 0.2. I have CS3, so I’d like to have the code migrate to 0.3.

   Thanks

8. Chad Nov 16

   It is AS2. AS3 should be even easier, you’ll mainly need to remove the XML parsing routine I have in there and just use the E4X capabilities of AS3.

9. Kim Jan 5

   Thanks Chad for sharing this!

   This php code is working, just just the word press problem.

   $filen”;}
   }closedir($handle);}
   ?>

   cheers!

10. Kim Jan 5

    sorry… my comment didn’t appear nicely

    3 changes needed to be done in the php code above :

    1) ?phpif need a space btw ?php if
    2) opendir(‘video’) need to retype the single quote
    3) change && to &&

    thanks again!

11. Kim Jan 5

    sorry for the comments doesn’t appeared nicely….here you go

    3 changes in the php code needed:

    1) a space btw php and if
    2) ‘videos’ need to retype the single codes
    3) && change to &&

    cheers!

12. Kim Jan 5

    3 changes in the php code needed:

    1) a space btw php and if
    2) ‘videos’ need to retype the single codes
    3) && change to &&

    cheers!

13. Drew Jun 25

    Hey, Im having some difficulty downloading the source code. Basically, when I click “click here to download” it takes me to a new page displaying “Rammstein_-_Amerika.flvcafe_townsend_home.flv”.

    Any suggestions?
    Thanks in advance.

14. Hector Jul 21

    Hi,

    Is there a reason why the video player gets smaller and smaller when switching between the videos in the dropdown menu? Let me explain, when the demo page loads, I selected the townsend cafe video then pressed the load button. The video loads normally. I do the same with the Amerika video. No problem. But if I go back and select the townsend cafe video then click on the load button, the video player gets smaller. I switched between the videos several times and each time the video player got smaller and smaller. Is this a bug or part of this app? I checked the demo in IE 7.0, Opera 9.5, and Firefox 3.0 on Vista (64-bit).

15. Chad Jul 21

    hector, I’m not sure but I think it has to do with the differences in aspect ratios of the videos. Probably could be fixed easy enough by looking at setting the widths on the videos load event.

16. mike p Oct 9

    I’ve been searching for a solution like this for a long long time. Your PHP script and Flash combo are just perfect. I was able to modify your code to use the list component and a netstream object. It’s working just great. Thanks so much for your excellent work and generosity. -Mike

17. J Oct 28

    If you wanted to load random flv’s using this method how modify the code?

18. A King Nov 13

    never mind everything worked great, thanks for this!

19. Doctor M Jun 5

    Thanks for these coding examples and your answers to the questions posed. I found your site when searching for a video jukebox script.

1. Simple Flash Video Jukebox using PHP « Flash Enabled - Get Ready With Flash…
2. Easily learn more about your Flash Videos - MetaData Viewer | Visualrinse | Design and Development by Chad Udell
3. Use a Datagrid to Verify and Test Dozens of Videos at Once. | Visualrinse | Design and Development by Chad Udell

Leave a reply