Swami Charan's Blog My personal blog…

YouTube Video Player in Flash AS2.0 – Part I

In these series of tutorials, i m going to explain how to create a Youtube Video Player in Flash AS2.0. The main challenge we have here is to get the YouTube FLV URL to pass it to NetStream Object  in Flash.

While playing any Youtube video in a HTML page, the path of the video is something like http://www.youtube.com/watch?v=XYhj22n4aBc. Each YouTube video has a specific Video ID associated with it. Here the Video ID for this video is 'XYhj22n4aBc'. To play any video, we need to know the video ID of that video at first hand.

Extracting the video path using video id is a very tricky part, which i could succeed after refereing to so many scripts.

 Here is the script which is in working condition.

<?php

    $id = trim($_REQUEST['id']);

    $url = "http://www.youtube.com/watch?v=" . $id;

    $url = $url . "&fmt=18"; //Gets the movie in High Quality 

    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, $url);

    curl_setopt($ch, CURLOPT_HEADER, false);

    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $info = curl_exec($ch);

    if (!preg_match('#var swfArgs = (\{.*?\})#is', $info, $matches))

    {

        echo "Check the YouTube URL : {$url} <br/>\n";

        die("Couldnt detect swfArgs");

    }

    preg_match('#"video_id":.*?"(.*?)"#is', $matches[1], $submatches);

    $video_id = $submatches[1];

    preg_match('#"t":.*?"(.*?)"#is', $matches[1], $submatches);

    $t = $submatches[1];

    $FLVPath = "http://www.youtube.com/get_video.php?video

_id=" . $video_id . "&t=" .$t."&.flv";

    print "<root><t>".$t."</t></root>";

    curl_close($ch);

?>

If you see the above script, this script basically being fed with a variable 'id' which is the video id of a youtube video. And it returns the full path of the Youtube FLV.

For example, say if video id 'zZRQEtAyiTM', is being fed to this php while running on a webserver, the output should be something like 'vjVQa1PpcFMaXPzGWSprxh2Kx2aRuJKanf1RA1exrFE%3D'. This is the 't' variable required to get the path to FLV. Hence the FLV path will be something like this:

http://www.youtube.com/get_video.php?video_id=zZRQEtAyiTM&t=vjVQa1PpcFMaXPzGWSprxh2Kx2aRuJKanf1RA1exrFE%3D&.flv

Once we get the FLV path, only thing we need to to do is to give this path to NetStream Object in Flash.

Flash Approach:

From flash, we need to send the variable VideoID as 'id' and we need to retieve the 't' parameter inorder to form the full FLV path. Sending and recieving variables to and from scripts is possible unding LoadVars().

First create a loadVars objects to send and revcieve the id to script:

 

var send_lv = new LoadVars(); //To send the variable

var result_lv = new LoadVars(); //To recieve the variables from script

 

Initialize the variable to be send i.e. 'id'

send_lv.id = VideoID; //Give the Youtbe VideoID. Here it will be 'zZRQEtAyiTM'

 

To send the variable to the php script, we can use 'sendAndLoad()' function:

send_lv.sendAndLoad("Path to the PHP Script", result_lv);

 

Before proceeding further, let me tell you, i faced an issue while retrieving 't' parameter from the php script using 'sendAndLoad' function. If we see the 't' parameter value, 'vjVQa1PpcFMaXPzGWSprxh2Kx2aRuJKanf1RA1exrFE%3D', it might have special characters as part of it. So, while reading the output from php script, if Flash encounter any character like '&' etc, it will take it as the end of the variable. This might result in the failure.

The best approach is to read the 't' paramter into an xml and get the 'nodeValue' by parsing the xml. This is possible using 'sendAndLoad' method in Flash. First need to crate an xml object:

var result_xml = new XML();

result_xml.ignoreWhite = true;

 

Now call the LoadVars.sendAndLoad() to return the 't' parameter into this xml:

send_lv.sendAndLoad("Path to the PHP Script", result_xml);

 

If you have noticed the php script, it says

 

print "<root><t>".$t."</t></root>";

 

This is done to get this output into result_xml. If everything works fine, the php will result and xml something like this:

 

<root><t>vjVQa1PpcFNfvTfq7vjb87Ki9ElXscC7fBcw4mSS-YU%3D</t></root>

 

Now we will proceed with reading the results from php script. While loading variables from script, we need to use LoadVars.onLoad handler, which says whether the operation is success(true) or failure(false).

result_xml.onLoad = function(success:Boolean){

         if(success){

                 //read the 't' parameter from php parsing the xml

                 var t = result_xml.firstChild.firstChild.firstChild.nodeValue;

                 //Construct the Youtube FLV path

                 youtubeVideoPath = "http://www.youtube.com/get_video.php?

video_id="+videoID+"&t="+t+"&.flv";

        }

}

 

Once we get full youtube FLV path, we can pass this to NetStream.Play() to stream the video into flash.

Here's the complete code:

 

var send_lv = new LoadVars(); //To send the variable

send_lv.id = VideoID; //Give the Youtbe VideoID. Here it will be 'zZRQEtAyiTM'

var result_xml = new XML();

result_xml.ignoreWhite = true;

send_lv.sendAndLoad("Path to the PHP Script", result_xml);

result_xml.onLoad = function(success:Boolean){
         if(success){
                 //read the 't' parameter from php parsing the xml
                 var t = result_xml.firstChild.firstChild.firstChild.nodeValue;
                 //Construct the Youtube FLV path
                 youtubeVideoPath = "http://www.youtube.com/get_video.php?
                                    video_id="+videoID+"&t="+t+"&.flv";
        }
}

 

This is all needed to make Youtube Video playing in Flash . Thanks for reading...

 

References -