How to load a YouTube movie into Flash using TubeLoc

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!

, , , , ,

  1. #1 by Ion Drimba - October 26th, 2009 at 16:59

    The link for the AS3 youtube API shows the AS2 API for youtube. It´s not the fist time I´ve seen people posting this fake link, or is google getting nutz?

  2. #2 by zedia.net - October 26th, 2009 at 22:16

    I think you read wrong, this link:
    http://code.google.com/apis/youtube/flash_api_reference.html
    leads to the reference of the AS3 documentation.

  3. #3 by Simo - October 28th, 2009 at 09:32

    Thank you for giving us such important information but my flash’s actionscript doesn’t have import keyword

  4. #4 by zedia.net - October 28th, 2009 at 09:55

    Sorry, but if you don’t have the import keyword, it must mean that you are still using ActionScript 2. Mostly all examples on this blog are in ActonScript 3 since it’s been out for so long.

  5. #5 by Fadilou Seck - October 30th, 2009 at 13:16

    Thanks a lot, this just save me a week of work..

  6. #6 by Thijs - November 10th, 2009 at 08:22

    I get this error message.. What can I do about it?

    Warning: 1090: Migration issue: The onUnload event handler is not triggered automatically by Flash Player at run time in ActionScript 3.0. You must first register this handler for the event using addEventListener ( ‘unload’, callback_handler).

  7. #7 by zedia.net - November 10th, 2009 at 17:11

    Well this is just a warning because of one of the event’s name. You don’t have to do anything about it. It will still work.

  8. #8 by Chris - February 4th, 2010 at 00:24

    Super helpful! Thanks a lot. I’ll definitely be integrating some YouTube videos into my future work.

  9. #9 by Paula Bastos - April 22nd, 2010 at 11:03

    Hi,
    why does youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);

    never happens to me? It never goes to the function onPlayerReady.

  10. #10 by proxysix - March 4th, 2011 at 02:41

    i have a problem , i have this code in a class file and when i add the event listener to check for errors , it returns a error , but how would i go about checking what the error is?

  11. #11 by Davey - May 18th, 2011 at 07:01

    You are my hero! _O_

  12. #12 by Ricky - October 21st, 2011 at 21:06

    I’m loading the YouTube video in one scene, it works, but when I want the users to go to “Main Menu” the video stays there. How to do I take it out?

(will not be published)
Subscribe to comments feed