During this tut we’ll take a look at using the YouTube API to build a custom YouTube player with ActionScript 3.0.
Final Result Preview
Let’s take a look at the final result we will be working towards:
Step 1: File Setup
Here’s how this is going to work:
- We’ll create a YouTube player wrapper that will receive the video’s ID
- We’ll create a document class to instantiate the player and set its controls
- We’ll build the player’s UI with the design tools in Flash IDE and reference them in the document class
For this we’ll need the following files:
Step 2: Stage Setup
Open up Main.fla and edit the stage to make it 500×440 with 30 frames per second. Set the document class to “Main.”
Step 3: Layers Setup
We only need two layers for this tutorial: the player holder, which will be populated by our YouTube player and the controls layer, which will have all the buttons used to control the player. In this case we’ll have a “play/pause” a “mute/unmute” a progress bar(represents amount loaded) and a fullness bar (represents the playhead time).
I’ve added a bunch of other frames just for graphical appearance, you don’t really need those.
Step 4: Controls
These are simple movieclip symbols with the instance names “play_mc” and “mute_mc”, “progress_mc” and “fullness_mc.”
Step 5: Player Holder
The player is also a simple black shape converted to a movieclip with the instance name “holder_mc.”
Step 6: YoutubePlayer Class
Open YoutubePlayer.as and build a skeleton base class that extends a MovieClip class
package
{
public class YoutubePlayer extends MovieClip
{
public function YoutubePlayer() {
}
}
Step 7: YoutubePlayer.as Imports
We need to import the following classes:
import flash.display.MovieClip; import flash.display.Loader; import flash.events.Event; import flash.system.Security; import flash.net.URLRequest;
Step 8: YoutubePlayer.as Variables
..and then setup the following variables (all the code in the coming steps is commented):
var player:Object; //the object which will have the player loaded to var loader:Loader; //the loader which will load the player var id:String; //the video's id var playerStatus:String; //returns the players current playing status var progressRatio:Number; //returns the ratio difference between the bytes loaded and the bytes total, from 0 to 1, (useful for the progress bar) var fullnessRatio:Number; //returns the ratio difference between the playhead and the total seconds, from 0 to 1, (useful for the fullness bar) var ismuted:Boolean; // returns true if player is muted
Step 9: YoutubePlayer.as YoutubePlayer()
When instantiated we need the video’s id passed to the YoutubePlayer() function:
public function YoutubePlayer($id:String) {
Security.allowDomain("www.youtube.com"); //allow access from youtube
id = $id //sets the id
loader = new Loader(); //instantiates the loader
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit); //After loading, calls onLoaderInit
loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3")); //starts loading process
}
Step 10: YoutubePlayer.as onLoaderInit()
Here’s the onLoaderInit() function, called after the loader is instantiated (see previous code block).
private function onLoaderInit(event:Event):void {
addChild(loader); //adds the loader to stage
loader.content.addEventListener("onReady", onPlayerReady); //called when the player is ready
loader.content.addEventListener("onError", onPlayerError); //called when the player has errors
loader.content.addEventListener("onStateChange", onPlayerStateChange); //called when the playing state is changed
}
Step 11: YoutubePlayer.as onPlayerReady()
If everything’s gone OK so far, the onPlayerReady() function is called:
private function onPlayerReady(event:Event):void {
player = loader.content; //sets the player
player.setSize(400, 225); //sets the display size
player.loadVideoById(id) //loads the video by the id
addEventListener(Event.ENTER_FRAME, updatePlayer); //updates the player
}
Step 12: YoutubePlayer.as Other Useful Events()
These traces come in handy for debugging:
private function onPlayerError(event:Event):void {
trace("player error:", Object(event).data);
}
//I could have used this to update the playerStatus variable but I wanted to show you another method
private function onPlayerStateChange(event:Event):void {
trace("player state:", Object(event).data);
}
Step 13: YoutubePlayer.as Wrappers
These are the wrappers for external controlling:
public function playVideo() {
player.playVideo()
}
public function pauseVideo() {
player.pauseVideo()
}
public function stopVideo() {
player.stopVideo()
}
public function muteVideo() {
player.mute()
}
public function unmuteVideo() {
player.unMute()
}
Step 14: YoutubePlayer.as updatePlayer()
Just one last function and the class is done:
public function updatePlayer(e) {
ismuted = player.isMuted() //returns true if muted
//sets the progress ratio
progressRatio = player.getVideoBytesLoaded() / player.getVideoBytesTotal()
//sets the fullness ratio
fullnessRatio = player.getCurrentTime()/player.getDuration()
//sets the playerStatus for outside use
switch(player.getPlayerState()) {
case -1:
playerStatus = "unstarted"
break;
case 0:
playerStatus = "ended"
break;
case 1:
playerStatus = "playing"
break;
case 2:
playerStatus = "paused"
break;
}
}
Step 15: Main.as Imports
Hopefully you already know how to build a basic document class (though if not, check out this quick introduction). Inside, import these classes:
import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import YoutubePlayer;
Step 17: Main.as Main()
Here’s our Main() function.
public function Main() {
addEventListener(Event.ADDED_TO_STAGE, init); //prevents calls to stage before it's ready
}
Step 16: Main.as Init()
One question you might be asking is, “How do I know the video’s id?”
It’s very simple: take the url of the film you’re after “http://www.youtube.com/watch?v=fJGLAo_7F_I”, for instance; the video id is the 11 digit number carried by the v var – in this case “fJGLAo_7F_I”.
private function init(e) {
removeEventListener(Event.ADDED_TO_STAGE, init); //removes the previous listener
youtubeplayer = new YoutubePlayer("txqiwrbYGrs"); //instantiates the player with this video id
//sets up the buttons
play_mc.buttonMode = mute_mc.buttonMode = true;
play_mc.addEventListener(MouseEvent.CLICK, playPausePlayer);
mute_mc.addEventListener(MouseEvent.CLICK, muteUnmutePlayer);
holder_mc.addChild(youtubeplayer) //adds the player to the player holder
//resets the fullness and progress
fullness_mc.width = 1
progress_mc.width = 1
//updates the fullness and progress
addEventListener(Event.ENTER_FRAME, loop);
}
Step 17: Main.as playPausePlayer()
Here’s the function for our simple button that uses “playerStatus” to toggle between playing and paused:
private function playPausePlayer(e) {
if (youtubeplayer.playerStatus == "playing") {
youtubeplayer.pauseVideo();
}else {
youtubeplayer.playVideo();
}
}
Step 18: Main.as muteUnmutePlayer()
Similarly, here’s the function for our button that uses “ismuted” to toggle between mute and unmute:
private function muteUnmutePlayer(e) {
if (youtubeplayer.ismuted) {
youtubeplayer.unmuteVideo();
}else {
youtubeplayer.muteVideo();
}
}
Step 19: Main.as loop()
Let’s figure out how the film’s progress is doing..
//multiplying the ratio by the total width of the bars will give us the desired length since the ratio goes from 0 to 1
private function loop(e) {
fullness_mc.width = youtubeplayer.fullnessRatio * 350
progress_mc.width = youtubeplayer.progressRatio * 350
}
Conclusion
As you can see, it’s fairly simple to create a basic youtube player in AS3, be sure to check out the Player API reference for a list of functions and parameters you can use to extend this one.
I hope you liked this tutorial, thanks for reading!