Contact Me


qrcode

Recent Posts


Categories


Archives


Tags

3d actionscript Actionscript 2 Actionscript 3 api APIs as2 as3 brand caching carousel channel code compress contest contract CSS Flash flv fp10 free freelance gadget gadgets gdata google JavaScript jquery mvc papervision papervision3d PHP player playlist puremvc pv3d search tube tutorial twitter video widget XML you youtube

Recent Comments

  • Ahmed: Good old flexlib, what component are you using?
  • omer: Great article, help me allot. The only problem that I facing now is that I use flexlib component and I...
  • Ahmed: Well not designed, I merely consulted, gave my ideas, helped them with ux and code and deployment too!...
  • Zain Hasan: Oh wow, I am crazy about Olympism and today I came too knw that “best of us” is designed by...
  • Ahmed: Anything I can do to help, I need to update this plugin, need to implement oembed too

Links


Help end world hunger

The YouTube Player API

Update: keep up to date with my latest code on my Github.

I’ve recently had an article on the YouTube Player API for Actionscript 3 published on the Flashtuts+ network. However, some people are having issues getting to grips with loading another video in-situ, so here’s a slight change to the code:

Once you read the tutorial, you will finish with two important files:

  • YouTubePlayerWrapper.swf – The AS2 wrapper
  • App.as – The AS3 class files


Now the first thing to do in this customisation is to change the name of “App.as” to “YouTubePlayer.as”, therefore our class is now called “YouTubePlayer”. I’ve also added two new public variables called “playerWidth” and “playerHeight”, so the class’s code is now like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
package
{
    import com.gskinner.utils.SWFBridgeAS3;
   
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLRequest;

    public class YouTubePlayer extends Sprite
    {
        public static const BRIDGE_NAME:String          = 'YouTubePlayerWrapperBridge';
       
        public var playerWidth:Number                   = 600;
        public var playerHeight:Number                  = 400;
       
        private var player:Loader;
        private var bridge:SWFBridgeAS3;
        private var videoId:String;
        private var loaded:Boolean;
               
        public function init(videoId:String):void
        {
            this.videoId = videoId;
           
            if ( !loaded )
            {
                var request:URLRequest = new URLRequest( 'assets/swf/YouTubePlayerWrapper.swf' );
               
                player = new Loader();
               
                addChild( player );
               
                player.contentLoaderInfo.addEventListener( Event.INIT, handlePlayerLoadedComplete );
               
                player.load( request );
            }
            else
            {
                handlePlayerLoadedComplete();
            }
        }  
       
        public function play(videoId:String):void
        {
            bridge.send( 'playVideo', videoId, playerWidth, playerHeight, false, null, false );
        }
       
        public function stop():void
        {
            bridge.send( 'stopVideo' );
        }
       
        public function handlePlayerLoadedComplete(e:Event=null):void
        {                      
            if ( bridge )
            {
                handleBridgeConnect();
            }
            else
            {
                bridge = new SWFBridgeAS3( BRIDGE_NAME, this );
           
                bridge.addEventListener( Event.CONNECT, handleBridgeConnect );             
            }
        }
       
        public function sendEvent(e:String):void
        {
            trace( e );
        }
       
        private function handleBridgeConnect(e:Event=null):void
        {
            loaded = true;
           
            play( videoId );
        }  
    }
}

Now we can control this class through another base class, so create a file called “App.as” and put this code in there:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;

    public class App extends Sprite
    {
        private var player:YouTubePlayer                        = new YouTubePlayer();
       
        public function App()
        {
            var button:Sprite = new Sprite();
           
            addChild( player );
           
            button.graphics.beginFill( 0xFF0000 );
            button.graphics.drawCircle( 0, 0, 20 );
            button.graphics.endFill();
           
            button.addEventListener( MouseEvent.CLICK, handleClick );
           
            addChild( button );
           
            player.init( '76aG8wcb8V8' );
        }
       
        private function handleClick(e:MouseEvent):void
        {
            player.init( 'U5A7AjsZHmQ' );
        }
    }
}

All this class does is create a new “YouTubePlayer()”, it the draws a button, adds a listener that loads another video, thus allowing you to see how you can easily and simply load in a simple YouTube Player, like so:

PS: I am going to publish my full YouTube Player API Library for AS3 on github very soon!

Share the love:

  • Share/Bookmark

Related posts:

Tags: , , , , , , , , , , ,
Posted in: APIs, Actionscript 2, Actionscript 3, Development on Monday, June 29th, 2009.
You can leave a response, or trackback from your own site.

44 Responses to “The YouTube Player API”

« Older Comments

Leave a Reply

Your comment:

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Fork me on GitHub