Monday, June 29th, 2009
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:
{
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:
{
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!
