Using multiple
AS2 YouTube Chromeless
players in AS3

Since YouTube still haven’t made a player for AS3, and a project I have been working on demanded the use of multiple players in the same AS3 context, I had to sit down and create my own solution. I of course did some google’ing first to see if this problem had been solved already. All I found of importance was TubeLoc and *drawlogic’s players. Both of them use either LocalConnection or ExternallInterface calls to communicate with the AS2 player. None of them however can use multiple players since the communication breaks when the second one is instantiated.

They way i solved it was using Grant Skinner’s SWFBridge classes. I first made an AS2 wrapper swf, which uses the SWFBridgeAS2 class, and exposes the YouTube chromeless player api so that we can call all the YouTube method calls from the SWFBridgeAS3 class. But for the possibility of using multiple instances of the player, the LocalConnection used in Grant’s classes need a unique id for each player. The Display class i made takes care of this behind the scenes. All you need to do is supply the url to the AS2 youtube wrapper when you instantiate the class, and you’re good to go:


       // Import the class
       import com.perkstoveland.youtube.Display

       // Create the player
       var wrapperURL:String = "http://www.domain.com/youtubewrapper.swf";
       var youtubeDisplay:Display = new Display( wrapperURL );

       // Lets do something with the player
       youtubeDisplay.cueStartUpVideoById( "XtCW-axRJV8" );
       addChild( youtubeDisplay );

Thats all the code you need. You can instantiate as many times as you want, the same way. All you need to do now is create the GUI. You can see an example here (updated 16.05.09), and download the source for it here (updated 16.05.09).

Last month i had a talk at FUGN where i presented this. You can download the keynote as pdf here (in norwegian only).



Update 16.05.09

I finally got round to adding to the player functionality. Now it is wrappiing all the functions of the AS2 player. You use the same api calls as the AS2 version, but the way the getter methods work is slightly different. Since LocalConnection is asynchronous, meaning AS2 can’t return values directly to AS3, we instead add a listener before you make the call as normal, and the result will come back through the listener handler. Here is an example:


       // Import classes.
       import com.perkstoveland.youtube.Display;
       import com.perkstoveland.youtube.events.DisplayEvent;

       var wrapperURL:String = "http://www.domain.com/youtubewrapper.swf";
       var youtubeDisplay:Display = new Display( wrapperURL );
       youtubeDisplay.addEventListener(
                          DisplayEvent.VIDEO_BYTES_LOADED_RECIEVED,
                          onBytesLoadedReceived );

       youtubeDisplay.getVideoBytesLoaded();

       function onBytesLoadedReceived( $e:DisplayEvent ):void
       {
              trace( $e.bytes );
       }

Keep in mind that there are now some public methods in Display.as that aren’t ment for you to call. These are public so that the wrapper is able to return the requested information by method calls via LocalConnection. As a rule of thumb, stay away from all public methods that start with “on” in their name. My next project will be to create a GUI for the player and at the same time encapsulate the off-limit public methods i just mentioned. When i get the time…

You can get the updated version here.

After request i have put up a link where you can download the fla file for the AS2 youtube wrapper. You shouldn’t need to modify it to make you app work, as most likely the fault would be outside the wrapper. Anyways, you can download it here

Popularity: 100% [?]