Adobe

Products

Acrobat

Creative Cloud

Creative Suite

Digital Marketing Suite

Digital Publishing Suite

Elements

Photoshop

Touch Apps

Student and Teacher Editions

More products

Solutions

Creative tools for business

Digital marketing

Digital media

Education

Financial services

Government

Web Experience Management

How to play FLV videos from YouTube using Flash Lite 3

by Rosario Conti

rosarioconti.wordpress.com

Created

30 September 2007

Requirements

Prerequisite knowledge

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

Sample files

youtube_fl3_video.zip (104 KB)

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:

Open Flash CS3 Professional, create a new file and name it Youtubev2.fla
Create five layers and name them: over, text, buttons, actionscript, and BG.

Frame 1: Building the interface

Follow these steps to build the interface:

First, create a button on stage and give it the name avanti.
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:

Here you can add any background to give a nice look to the app.
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

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:

Add a video object to the stage and call it video1.
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.
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:

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.
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.
Browse to the SWF file and test the application.

How to play FLV videos from YouTube using Flash Lite 3

by Rosario Conti

Created

Page tools

Requirements

Prerequisite knowledge

User level

Sample files

Setting up the application

Frame 1: Building the interface

Frame 2: Adding the background and search capability

Frame 3: Adding the video object

Grabbing YouTube IDs

Deploying the application

More Like This

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company