The Blog

This is a How to guideline on the Youtube AS3 Wrapper.

Before starting, this tutorial assumes you are at least familiar with AS3.

• Firstly, you should download the latest Youtube AS3 Wrapper from here (the lastest at the time of this writing is v0.7). Unzip the contents into your project folder (generally the 2 swf file should be placed in the same directory as the swf file that will use the wrapper, or a subdirectory of it; in this tutorial I will assume they are in the same directory). Next, depending on whether you’re using the .as source files, found under pinosh/youtube/ in the zip archive, or the .swc component, located in the swc folder, you should place the 2 .as source files in the Classpath of your project, or include the .swc in the components directory.
  My Directory structure looks like this:
  • rootproject
    • classes
      • pinosh
        • youtube
          • IYoutube.as
          • YoutubeEvent.as
    • ytPlayer.swf
    • ytODLCWrapper.swf
    • TestPlayer.as
    • TestPlayer.swf
    • TestPlayer.fla

  With a directory like this, I should set the classPath to “./classes”.

• Now TestPlayer.as will be set as the Document class in Flash. Since it’s going to be the Document class, we should make the TestPlayer class extend MovieClip.
  This is how our bare bones class should look at first:
  package {
  import flash.display.MovieClip;
      public class TestPlayer extends MovieClip {
          public function TestPlayer() {
               super();
          }
      }
  }
• Next, we will need IYoutube interface and YoutubeEvent class, so let’s import those:
      import pinosh.youtube.IYoutube;
      import pinosh.youtube.YoutubeEvent;

  Also, because we must load the ytPlayer.swf in our swf at runtime, we will need the Loader class and URLRequest class. Also we’ll need IOErrorEvent class and Event class to handle properly the events dispatched by our loader.

      import flash.events.Event;
      import flash.events.IOErrorEvent;
      import flash.display.Loader;
      import flash.net.URLRequest;
• Now we have set up everything we need. So let’s load our youtube player. We’ll save our player, after it has been loaded, in a private variable named player.
  The code to load the player, will be placed inside the constructor of our TestPlayer class:
  var loader : Loader = new Loader();
  // listen for the right events
  loader.contentLoaderInfo.addEventListener(Event.COMPLETE, this.playerLoaded);
  loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, this.playerCannotBeLoaded);
  
  loader.load(new URLRequest("ytPlayer.swf")); // to pass the youtube api key use "ytPlayer.swf?apiKey="+apiKey

  Now we must declare and define the 2 event handler methods:

       private function playerLoaded(event : Event) : void {
              // grab the loader object
              var loader : Loader = event.target["loader"] as Loader;
              // add it to the display list of TestPlayer
              this.addChild(loader);
             
              // grab the IYoutube object; it's the content property of the loader object
              this.player = loader.content as IYoutube;
              // start listening for the events dispatched by player
              this.player.addEventListener(YoutubeEvent.PLAYER_READY, this.onYTPlayerReady);
              this.player.addEventListener(YoutubeEvent.PLAYER_STATE_CHANGE, this.onYTPlayerStateChange);
              this.player.addEventListener(YoutubeEvent.PLAYER_ERROR, this.onYTPlayerError);
       }
  
       private function playerCannotBeLoaded(event : IOErrorEvent) : void {
             // trace the for this test, bu should be handled more carrefully
             trace("Player Cannot be found: "+event);
       }
• Now we’re only left with the youtube handler methods, and we should declare those.
       private function onYTPlayerReady(event : YoutubeEvent) : void {
              // now our player is ready to rumble; let's play a clip
              this.player.loadVideo("Lrmf283dSXw");
       }
  
       private function onYTPlayerStateChange(event : YoutubeEvent) : void {
              trace("TestPlayer::onYTPlayerStateChange ==> "+this.player.getPlayerState());
       }
  
       private function onYTPlayerError(event : YoutubeEvent) : void {
              trace("TestPlayer::onYTPlayerError ==> "+this.player.getPlayerError());
       }

So this is about everything to load the wrapper and play a first clip.

Here is how the entire class file should look like:

For the entire documentation and a list of all the methods you can use to manage youtube clips,
please check out the documentation: Youtube AS3 Wrapper – Documentation

When you test your app, make sure you don’t test in the Flash IDE as it will not work. Test it in browser or in standalone flash player!

This wrapper can be used with flex too, not only with flash. The Test Harness Player is a flex app. You can view the Test Harness Player here, and download the entire source for it here.

Youtube, Youtube Wrapper as3, how-to, tutorial, wrapper, Youtube