Created
30 September 2007
Requirements  
Prerequisite knowledge Sample Files
You should be familiar with ActionScript 2 and PHP.
Additional requirements
 
Flash Lite 3 player
A web server supporting PHP with full access to the <cURL>resource
 
User Level  
Advanced  

 

Many Flash developers already know how to play an FLV and to stream it to the browser-based Flash Player. In this article, I will show you how to target the player to play FLV videos from YouTube using Flash Lite 3.
 
The hard part of doing this is around the YouTube website, which "hides" FLV files from downloading. However, the YouTube site can't really hide the position of the file. So what I do with this technique is read from YouTube page, parse the values, and pass the result to the player to stream the file.
 
A few notes about streaming files:
 
  • This is not really a streaming because there are some limitations to the FLV format we are going to download.
  • The files are sometimes too big in size and dimension, which can cause poor and slow streaming.
  • The 3gm Network also has a problem buffering the file because of net congestion, however, I will show a simple trick to perform a fluid connection later in the Frame 3 section of this article.
  • The amount of data could be streamed in a perfect way if we could actually access the video directly from the RTMP protocol using Flash Media Server and choosing the right file size and dimension. However, YouTube video is served via progressive download and not streamed using Flash Media Server.
The technique I use here includes building the app, grabbing YouTube IDs, parsing and establishing the connection.
 

Setting up the application

 
To get started, you need to create a new Flash file and create some layer. Follow these steps:
 
  1. Open Flash CS3 Professional, create a new file and name it Youtubev2.fla
  2. Create five layers and name them: over, text, buttons, actionscript, and BG.
Frame 1: Building the interface
Follow these steps to build the interface:
 
  1. First, create a button on stage and give it the name avanti.
  2. Next, give your video player a name. To do this, create a text field and call it YouTubePlayer   

 

How the application should appear
Figure 1. How the application should appear
 
3. Apply the following code to Frame 1 in the actionscript layer. You will need to change both the http://yourserver.com/leggi.php and the http://yourserver.com/get.php strings in this code to match the path of your web server to call leggi.php and get.php.
 
stop(); var TIMER = 0; //Buffer Timer checking var searchedW:String="adobe"; //Searching String var scelto=""; //Movie id // NetConnection, NetStream Objects var nc:NetConnection = new NetConnection(); nc.connect((null)); var ns:NetStream = new NetStream(nc); //Forward Button avanti.onRelease = function() { createArea(); // To create the video list area nextFrame(); }; // Video List Area function createArea() { //---Font Format var my_fmt:TextFormat = new TextFormat(); my_fmt.bold = false; my_fmt.font = "Arial"; my_fmt.size = 8; my_fmt.color = 0xFFFFFF; for (i=0; i< 14; i++) { createEmptyMovieClip("but" + i, _root.getNextHighestDepth()); eval("but" + i).beginFill(0xFF0000, 80); eval("but" + i).moveTo(0, 0); eval("but" + i).lineTo(100, 0); eval("but" + i).lineTo(100, 10); eval("but" + i).lineTo(0, 10); eval("but" + i).lineTo(0, 0); eval("but" + i).endFill(); eval("but" + i)._x=2; eval("but" + i)._y=(i*11); eval("but" + i).createTextField("label", this.getNextHighestDepth(), 0, -2, 100, 12) eval("but" + i).label.setNewTextFormat(my_fmt); eval("but" + i).onRelease = function() { scelto=files[this._name.substr(3,1)]; getN.load("http://yourserver.com/get.php?v=" + scelto); searchedW=cercastr.text; }; eval("but" + i).label.text = filetime[i] + " - " + filedesc[i]; } } files = new Array(); // Files YouTube IDs - E.g. "hcAh-AxXex8" filedesc = new Array(); // Descriptions filetime = new Array(); // Time lv = new LoadVars(); lv.contentType = "text/plain"; // handling Content in text format lv.onLoad = function() { fl = this.filelist; files = fl.split(","); c = files.length-1; // Amount data searched usually 20 items for page fl = this.filedesc; filedesc = fl.split(","); fl = this.filetime; filetime = fl.split(","); c = 14; // Setting 14 to reduce the search list displayed for (i=0; i<c; i++) { if (filetime[i] <> undefined ) { //Checking if the time returned is null eval("but" + i).label.text = filetime[i] + " - " + filedesc[i]; } else { eval("but" + i).label.text = ""; } } }; //Call to return the Video List parsed lv.load("http://yourserver.com/leggi.php?cerca=" + cercastr.text);
 
Frame 2: Adding the background and search capability
Use these steps to add the background and search capability:
 
  1. Here you can add any background to give a nice look to the app.
  2. Also add a button, name it cerca, and add an input text field to perform the search.

 

How the background and search should appear
Figure 2. How the background and search should appear
 
  1. Apply the following code to Frame 2 the actionscript layer. You will need to change http://yourserver.com/leggi.php  parameter at the end of this code to the path to the leggi.php file that you upload to your PHP application and web server.
stop(); var c:Number=0; //Reset the counter list cercastr.text= searchedW; //Assigning the searched word //---------------------------------- //Extracting the t ID linkaggio = new Array(); // getN = new LoadVars(); getN.contentType = "text/plain"; getN.onLoad = function(success) { fl = this.t; linkaggio = fl.split(","); hideM(); //hiding the search list TIMER = setInterval(updateOutput, 10); //Check buffer status nextFrame(); }; //Get buffer infos function updateOutput() { tempobuf.text = ns.bufferTime; riman.text = ns.bufferLength;; } //Hide video list area function hideM() { for (g=0; g < 14; g++) { eval("but" + g)._visible= false; } } //Execute Search cerca.onRelease = function() { _root.lv.load("http://yourserver.com/leggi.php?cerca=" + cercastr.text); }
 
Frame 3: Adding the video object
Use these steps to build Frame 3:
 
  1. Add a video object to the stage and call it video1.
  2. Add a button called indietro and two text fields named tempobuf and riman, where tempobuf will display the buffer time used and riman will give info about the buffer status.
  3. Also add a button called indietro to go return to the search list.

 

How the application should appear
Figure 3. How the application should appear
 
4.   Apply the following code to Frame 3 the actionscript layer:
 
var af:String= "http://www.YouTube.com/get_video?video_id=" + scelto +"&t=" + linkaggio[0]; video1.attachVideo(ns); ns.setBufferTime(20); ns.play(af,-2,0); ns.onStatus = function(iObj:Object) { //ns.setBufferTime(5); trace(iObj.code); switch (iObj.code) { case "NetStream.Buffer.Full": ns.setBufferTime(5); tempobuf.text=2; break; case "NetStream.Buffer.Empty": ns.setBufferTime(20); tempobuf.text=5; break; case "NetStream.Play.StreamNotFound": ns.close(); clearInterval(TIMER); showM() prevFrame(); break; } } indietro.onRelease = function() { clearInterval(TIMER); ns.close(); showM() prevFrame(); } function showM() { for (g=0; g < 14; g++) { eval("but" + g)._visible= true; } }

 
Grabbing YouTube IDs

 
There are two PHP web pages used in the application. You will find these in the sample files linked from the beginning of the article.
 
get.php leggi.php
Leggi.php is used to read and parse vID, descriptions, and time from the video list search generated from YouTube. Once you choose the video, vID is sent to get.php page to get the last id, tID, which will give you the exact position of the FLV file.
 
Some notes on the PHP files. Open the two PHP files in a text editor and take a look at the code. To get the IDs:
 
  • The PHP files call the video you want to watch. For example, http://www.youtube.com/watch?v=yO4Y6TwKBpQ and they capture the page into a variable.
  • They parse the text to find the &t= parameter. You will notice this is long 32 characters long. For example, &t=OEgsToPDskJ_KveEss25md56sSdImmHA
  • They send the file name to the player along with the parameter string that they create. For example, http://www.youtube.com/get_video?video_id=" + V Value +"&t=" + T value
Figure 4 shows a simulation of the final application.
 
A preview of the final application. The actual application is included in the sample files linked from the beginning of the article.
Figure 4. A preview of the final application. The actual application is included in the sample files linked from the beginning of the article.

 
Deploying the application

 
Follow these steps to deploy your application:
 
  1. Publish the SWF file and deploy it to your Flash Lite 3-capable device. Or embed it in a web page if you don't yet have a Flash Lite 3-capable device.
  2. Upload the two PHP files to the location on your server that you specified in step three of the Frame 2 section above. The two PHP files are located in the sample files linked from the beginning of this article.
  3. Browse to the SWF file and test the application.