Mobile and Devices Developer Center

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.

Requirements

• Flash Lite 3 player
• A web server supporting PHP with full access to the <cURL> resource

Sample files:

• youtube_fl3_video.zip (ZIP, 124K)

Prerequisite Knowledge

You should be familiar with ActionScript 2, and PHP.

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.

   

   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.

   

   Figure 2. How the background and search should appear

3. 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.

   

   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.

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.