zedia flash blog

I have written this article a while back for FFDMag, but I thought I would put it here also. It lost a bit of relevance because YouTube now has an AS3 API for its player, but if you work on a project that uses TubeLoc, I think this article can be useful.

What you should know:
- Basic knowledge of ActionScript
- Basic knowledge of YouTube

What you will learn:
- How to load YouTube videos into Flash
- How to use the TubeLoc library to control those videos

Embedding a YouTube movie in an HTML page is an easy task, but we can’t say the same about embedding a YouTube clip in a Flash/Flex website. TubeLoc, an opensource library, is there to make that easier.

Before TubeLoc, you could always go and try to find the address of the FLV the YouTube player is loading and load that FLV directly into your Flash application, but YouTube changes the address almost every night, so it wasn’t a very long term solution. Another problem that TubeLoc solves is the fact that the YouTube player is made in ActionScript 2 and most projects now are using ActionScript 3, so it was hard interfacing with the player. TubeLoc is a wrapper around the the AS2 player and show us an AS3 API, but behind the scene it handles the YouTube player using local connection.

To get started with TubeLoc you will first need to download the library at this address:

http://code.google.com/p/tubeloc/

There you will also find a great demo showing you what you can do with the library. You can pause, stop, play, mute, seek, change the volume, change the the size of the video and even load the video without the YouTube player chrome (so you won’t see the play button from YouTube the only thing that will be there is the YouTube logo at the bottom right of the video).

In the zip file that you download from the previous url, copy the “com” folder located in the “as3/src” folder in the same directory where your FLA will be. Also copy there the file as2_tubeloc.swf from the folder “as3/lib”. Now we can get coding. Here is all that is needed to load a YouTube movie into Flash:

import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
 
var youtubeMovie:MovieSprite = new MovieSprite(null, true);
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
addChild(youtubeMovie);
 
function onPlayerReady(event_p:PlayerReadyEvent):void {
//it's just cleaner to remove listener that won't be used again
youtubeMovie.removeEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
 
//you can set the size of the movie this way
youtubeMovie.width = 370;
youtubeMovie.height = 276;
 
youtubeMovie.loadVideoById("tprMEs-zfQA");
}

The first lines import the library from the “com” folder we copied. After that it creates the MovieSprite. The first parameter is the id of the YouTube movie, since I will set that later I can just pass null to it. The second parameter is if I want to use the chromeless player, in this case I set it to true. The chromeless player is usefull when you want the video player to have control that are similar to the rest of your application. It is also usefull when you want to put your video under a mask to escape the traditonnal square look of videos. If we continue with the code, after we created the MovieSprite, we have to wait for the player to be initialized to go on that’s why we put an event listener on the MovieSprite(youtubeMovie). Once the listener function is called, all that is left to do is call the loadVideoById method. Finding a video id from YouTube is really easy; if the url of the video you want to load looks like this:

http://www.youtube.com/watch?v=tprMEs-zfQA

Than your id is only the last part : “tprMEs-zfQA”.

Now if you want to control your video all you have to do is :

//this will pause the video
youtubeMovie.pauseVideo()
 
//this will make it play again
youtubeMovie.playVideo()
 
//to mute the video
youtubeMovie.mute()
 
//to set the volume to half of maximum
youtubeMovie.setVolume(50)
 
//to seek in the video to 20 seconds
youtubeMovie.seekTo(20)

Well that is all it take to load a YouTube movie into Flash. I should warn you of some pitfalls; by reading the issues on the google code page, there seems to be problems with loading multiple videos at the same time. Also, destroying an instance of a MovieSprite seems to inhibit you from creating another one after so you should always keep an instance of you MovieSprite alive. Aside from that TubeLoc is an awesome library and I hope to see the proliferation of YouTube videos inside of Flash!