Using the ActionScript 3 YouTube Api

On October 14th YouTube released a new version of it’s API for Flash. This version would support ActionScript 3. Previously discussed on here was the library TubeLoc which was basically an AS3 wrapper around the ActionScript 2 API. Now the new API does all TubeLoc pertmitted us to do and even more.

Well loading a YouTube video in ActionScript 3 has never been easier and there is nothing to download (which has its downside in some way)to get started.

Here is all the code needed to load a YouTube movie:

package {
 import flash.display.DisplayObject;
 import flash.display.Loader;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.net.URLRequest;
 
 public class Main extends Sprite {
  private var _loader : Loader;
  private var _player : Object;
 
  public function Main() { 
  _loader = new Loader();
  _loader.contentLoaderInfo.addEventListener(Event.INIT, _onLoaderInit, false, 0, true);
  _loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
  }
 
  private function _onLoaderInit(event : Event) : void {
  _player = _loader.content; 
  _player.addEventListener("onReady", _onPlayerReady, false, 0, true);
  addChild (DisplayObject(_player));
 
  _loader.contentLoaderInfo.removeEventListener(Event.INIT, _onLoaderInit);
  _loader = null;
  }
 
  private function _onPlayerReady(event : Event) : void {
  _player.removeEventListener("onReady", _onPlayerReady);
  // Once this event has been dispatched by the player, we can use
  // cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
  // to load a particular YouTube video.  
  _player.setSize(640, 360);
  _player.loadVideoById("D2gqThOfHu4");
  }
 }
}

You can compile this code as an ActionScript project or make it the Document class of an fla in the Flash IDE to make it work.

So you start by loading the player using a normal Loader. Once the player is loaded you have to wait for it to send the onReady event before you can interact with it. Once this is done you can call all of the function from the API.

The previous code would load the chromeless YouTube player; but if you wanted to use the controls from YouTube you would only have to replace one line:

//_loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));//replace this line with the following
_loader.load(new URLRequest("http://www.youtube.com/v/VIDEO_ID?version=3"));//replace VIDEO_ID with the id of the video you want to load in the previous case :"D2gqThOfHu4"
 
//also you can comment the following line if you don't want the video to start automatically:
_player.loadVideoById("D2gqThOfHu4");

All the functionalities that where accessible with TubeLoc are also accessible with the AS3 API and there are some more. Those are methods to control the quality setting of the loaded movie. You can set the quality to small, medium, large and hd720. To do so you have 3 methods on the player. getPlaybackQuality():String will return the quality of the video currently playing. setPlaybackQuality(suggestedQuality:String) enables you to set the quality. Finally, getAvailableQualityLevels():Array will return you all the possibilities of quality that you can set the current video to.

For more information on the topic, refer to the API : http://code.google.com/apis/youtube/flash_api_reference.html

, , , , ,

  1. #1 by Absulit - March 19th, 2010 at 03:44

    Thanks for the code it works just fine

    I found too this wrapper
    it does the same inside
    http://blog.agitcraft.com/?p=103

  2. #2 by theguaz - March 22nd, 2010 at 14:00

    Thank’s a lot for the enlightment, you made my day!

  3. #3 by Tayyab - March 31st, 2010 at 02:00

    AWSOME .. works like a charm…

    thanks

  4. #4 by tego - July 19th, 2010 at 18:29

    Hi, nice post. One question, does anyone knows how to set rel=0 when using:

    _loader.load(new URLRequest(“http://www.youtube.com/v/VIDEO_ID?version=3″));

    Thanks.

  5. #5 by Sebastian - January 31st, 2011 at 11:47

    Thank you that was very helpful

  6. #6 by jeff - April 5th, 2011 at 00:49

    what do you think would be the best way to add a scrubbar in the chromeless player?

  7. #7 by craigJ - June 30th, 2011 at 01:56

    is there an easy (or hard) way to disable (or hide) the google-ads when the video plays?

  8. #8 by Zed - July 2nd, 2011 at 19:54

    Hi,

    I just tried it using Flex SDK 4.5.1 on an iPad and it doesn’t want to work. It works on a Samsung Galaxy tab tough.
    I have a feeling about the reason – It doesn’t work because we cannot play video without the native iOS videoplayer, but I am not sure.

    Cheers,
    Zed

  9. #9 by Ed - September 5th, 2011 at 11:08

    Zed : Hi,
    I just tried it using Flex SDK 4.5.1 on an iPad and it doesn’t want to work. It works on a Samsung Galaxy tab tough.
    I have a feeling about the reason – It doesn’t work because we cannot play video without the native iOS videoplayer, but I am not sure.
    Cheers,
    Zed

    Same thing here. I tried three times now without success.

    You’re maybe right about the reason why it doesn’t work, but how to actually make it works?

    Suggestions?

    Ed.

  10. #10 by Kabir - October 28th, 2011 at 07:27

    Hi there,

    Any idea how to use a playlist for change the video?

    I can’t load the new youtube id, it always plays the first one in _onPlayerReady.

    Thanks!

  11. #11 by AY01 - November 1st, 2011 at 16:57

    I tried pasting this into my flash project and it said “packages cannot be nested”. Of course I change the video ID, but what am I doing wrong? I’m fairly new to flash and actionscript

  12. #12 by bakiye - October 21st, 2012 at 17:32

    what do you think would be the best way to add a scrubbar in the chromeless player?

  13. #13 by FullSpeedAhead - September 23rd, 2013 at 19:07

    Hi there – I’m using the version with the Youtube controls. Can you show me how to setup a thumbnail gallery of additional videos that will play when clicked? I’m a bit lost in the Google Dev docks and need some clarification.

(will not be published)
Subscribe to comments feed