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: Can you put up an example?
  • Ahmed: Hmmm sorry this is a tough one but I don’t work with ASP.NET! Sorry!
  • Michael: Good example but one question… in all the slider skinning I see with Flex the thumb overruns the left...
  • venkata: Hi I am using OAuth to connect to youtube api. I got accessToken and TokenSecret for a particular user. Now...
  • Ahmed: Good old flexlib, what component are you using?

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