Advertisement
  1. Code
  2. ActionScript
Code

Build Your Own ActionScript YouTube Player

by
Difficulty:BeginnerLength:ShortLanguages:

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 500x440 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


Step 7: YoutubePlayer.as Imports

We need to import the following classes:


Step 8: YoutubePlayer.as Variables

..and then setup the following variables (all the code in the coming steps is commented):


Step 9: YoutubePlayer.as YoutubePlayer()

When instantiated we need the video's id passed to the YoutubePlayer() function:


Step 10: YoutubePlayer.as onLoaderInit()

Here's the onLoaderInit() function, called after the loader is instantiated (see previous code block).


Step 11: YoutubePlayer.as onPlayerReady()

If everything's gone OK so far, the onPlayerReady() function is called:


Step 12: YoutubePlayer.as Other Useful Events()

These traces come in handy for debugging:


Step 13: YoutubePlayer.as Wrappers

These are the wrappers for external controlling:


Step 14: YoutubePlayer.as updatePlayer()

Just one last function and the class is done:


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:


Step 17: Main.as Main()

Here's our Main() function.


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".


Step 17: Main.as playPausePlayer()

Here's the function for our simple button that uses "playerStatus" to toggle between playing and paused:


Step 18: Main.as muteUnmutePlayer()

Similarly, here's the function for our button that uses "ismuted" to toggle between mute and unmute:


Step 19: Main.as loop()

Let's figure out how the film's progress is doing..


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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.