Embed The YouTube Chromeless Player In Your Flex Application

Update Feb 27, 2009
This article generated a lot of interest. The most common complaint has been that the example doesn't work if you open it in multiple browser windows. This is a consequence of using a LocalConnection with a fixed name to receive incoming messages from the wrapper -- a second instance of the demo tries, and fails, to create the same LocalConnection. This is now fixed. I also reworked YTPlayer as a simple AS3 class instead of an MXML component. If you are trying to use this class in an AIR application, expect some difficulty! I hope to address this later, but for now please have a look at Chris Black's article showing an alternative approach that uses AIR's HTML control to embed the player and communicate via the YouTUbe Javascript APIs. In fact, the same approach can be used in the browser so long as you have script access.

The following is the original article.

Embed The YouTube Chromeless Player In Your Flex Application

Part of the success of Adobe Flex is due to the fact that it makes development for Flash recognizable and readily accessible to mainstream C++ and Java application developers who never programmed for Flash before.  But development can come to a screeching halt when confronted with something as simple as integration of a legacy Flash component.  Embedding the YouTube chromeless player, written in AS2, in a Flex application is a good example.  How does a Flex developer pull this off with no prior knowledge of AS2 or Flash Authoring, and without a copy of CS3 anywhere in sight?

Some Background

For this article we are only concerned with playing a YouTube video in a Flex application using the chromeless player API.  We will not be using the YouTube Data APIs, so our starting assumption is that we already have the ID of any video we want to play.

There are three ways to playback YouTube video.  You could embed the stock YouTube player using a URL of the form http://www.youtube.com/v/VIDEO_ID  but you will not be able to control or interact with the player SWF at all.  Secondly, you could access the FLV files directly and play them with the Flex VideoDisplay control.  You'll need to construct the URL to the FLV.  See James Ward's impressive demo using Dough McCune’s cover flow component.  Note that to play the FLVs directly you will end up proxying or storing them on your own server.

The third option, and the one we are interested in, is to embed the YouTube chromeless player, located at http://gdata.youtube.com/apiplayer.  The advantages of this player are:

• It allows full programmatic control over loading and playback.
• It can be used without a proxy thanks to the presence of a crossdomain.xml at gdata.youtube.com.
• As the name implies, you can skin the player in any way you like.

The catch using this with Flex is that the YouTube player is written in AS2.  While there is no issue loading the AS2 SWF in your Flex app, you cannot interact with it from your AS3 code.  The solution to this problem is to write a wrapper SWF in AS2 and use LocalConnection objects to enable two-way communication between the AS2 code and your Flex application. 

A basic outline of this approach was posted on March 17th on the YouTube developer forum.  Still, a Flex-only developer with no tools other than Flex Builder might feel no closer to a solution with this code. At least one developer on the forums was lead to practically beg for help from the AS2/Flash developers.

Writing The AS2 Wrapper

First, to use the chromeless player you must have a YouTube Developer key and you must pass the key as a query argument in the player URL.  It only takes a minute to sign up here.

The wrapper follows the same outline as the AS2 code posted in the YouTube developer forums with a few changes.  First we are going to use a pair of LocalConnection objects for each instance of the embedded player to enable bi-directional communication.  This is required if we want to deliver player status-change events and the current playback position to our Flex application.  Secondly, we will give each instance of the embedded player a different name -- hopefully the code will support multiple embedded players.

The communication looks like this:

The Flex code will use one LocalConnection with a fixed name to receive from the wrapper the randomly generated instance name of each player instance.  Using this name, a pair of additional LocalConnection objects is created -- one for Flex to issue commands that control the player, and one for the wrapper to send status updates to Flex.

Building The Wrapper Without CS3

We can use swfmill and MTASC to build the wrapper without using CS3.  Both are very simple to use and Clemans Hofreither posted a nice tutorial about using these two programs together.  The result is a ytbridge.swf that we can deploy with our Flex application, and we don't need a copy of CS3.  The full source for the wrapper and the commands used to build it are included in the source ZIP with the Flex demo below so I'm not reposting it here. 

Because the required developer key is passed from Flex to the wrapper, you are not required to build ytbridge.swf yourself unless you are making changes to the wrapper.  If you want, you can simply take ytbridge.swf as is from the source ZIP and avoid this step completely.

Using The Wrapper from Flex

All that remains is to load ytbridge.swf in our Flex application and communicate with it via the  LocalConnection objects.  Rather than walk through the details here, just choose View Source on the Flex demo.  Click on the image below to view the demo.

Other comments:

• I am not a Flash/AS2 developer.  If anyone can help improve or make corrections to the wrapper, please help!  Otherwise, feel free to use this as is at your own risk.
• You can create multiple instances of YTPlayer in your Flex app, but it seems you must load a video into each one before creating another.  Also, I had trouble separately controlling volume in any except the last player instance created.
• If you are finished with a player instance you must call dispose() in order to have the best chance of actually stopping audio and video playback and reclaiming resources.
• You can resize the player without difficulty as the demo shows, but you should ensure that the player maintains an aspect ratio of 4:3.
• Don't forget to pass your developer key -- it will not work without it.

Comments

[Paulo Fierro]

Well that just saved me a days work. Thanks! :)

[zdravko]

Garth,

On the YT forum I posted a comment about the scaling of the watermark with the link to your demo. If Geoff is correct then could you please fix the demo ;?)

From: "Geoff Stearns"
The new scaling code should never make the watermark larger than it's
original size. If you are seeing the logo get very large, it's likely that
someone has loaded the player into a swf and set the size by changing the
scale of the entire chromeless swf rather than calling setSize() via the
api.

[zdravko]

Garth,

On the YT forum I posted a comment about the scaling of the watermark with the link to your demo. If Geoff is correct then could you please fix the demo ;?)

From: "Geoff Stearns"
The new scaling code should never make the watermark larger than it's
original size. If you are seeing the logo get very large, it's likely that
someone has loaded the player into a swf and set the size by changing the
scale of the entire chromeless swf rather than calling setSize() via the
api.

[zdravko]

Garth,

On the YT forum I posted a comment about the scaling of the watermark with the link to your demo. If Geoff is correct then could you please fix the demo ;?)

From: "Geoff Stearns"
The new scaling code should never make the watermark larger than it's
original size. If you are seeing the logo get very large, it's likely that
someone has loaded the player into a swf and set the size by changing the
scale of the entire chromeless swf rather than calling setSize() via the
api.

[dehash]

Garth,
Nice example code. We have made a youtube feed display @
http://www.dehash.com/?p=75
Will clean it up and release the source soon. May be able to make it able to be integrated with your player if you need it.

-dehash

[lipo2000]

Thanks for nice and useful post! Unfortunately right now the demo is not available and there is nothing to download. Is it possible to repost it? Thanks in advance!

[Garth Somerville]

@lipo2000 Thanks for pointing this out, it should be fixed now.

@dehash Nice work on the feed display. It would go nicely with a player ;-)

@zdravko It is easy to change the code I provided to call setSize(). Just set scaleContent=false and then call setSize() whenever the size of the SWFLoader changes. I intend to update this demo with a couple of changes, and this is one of them. I will have a few thoughts on how best to handle resizing.

[dehash]

Hi Garth

@garthNice work on the feed display. It would go nicely with a player ;-)
Thanks. It is really simple for now but works ok.
The source code is now available and should work fine with your player, let me know it does not.

You can download the source code here http://www.dehash.com/?p=75

-dehash

[Rob Heittman]

Thanks for simplifying this and providing the appropriate SWF workaround artifacts. I've cast about for a couple days looking for a good "pure Flex 3 to chromeless YT player" solution and yours was a quick drop-in. Thanks for also not complicating the example with unrelated YT Data API cruft.

[laurent]

Hello,
I'm really interested by your solution but how can I download zip file containing ytbridge.swf ?
Thanks in advance.
Laurent

[Laurent]

I've found answer to my question. Sorry ! :D

[George]

Hello Garth,

I am coming across this exception "ArgumentError: Error #2082: Connect failed because the object is already connected."

Is there a good way to close the connections properly, while closing the browser?

is there a facility like unloading a flex application?

Thanks for your efforts.

George

[Leon]

Thanks for this, a great example and really helped us.

[Steve]

Thanks Alot! how do I listen for status changes? for example video ending? instead of checking for YTPlayer.ENDED , how do I setup a listener for a playerState change?

[Calvin]

I downloaded the code & everything works great... except when I run it in the debug mode, I get the following error. Any idea what it might be?

Error #2044: Unhandled StatusEvent:. level=error, code=

[oriol]

Hello, it looks great but when loading a second window at the same time using your URL example (http://otoh.typepad.com/on_the_other_hand/files/flex-youtube/YouTubeTest.html) it reports an error: ArgumentError: Error #2082: Connection fail. The Object is alrerady connected) Any ideas??

[lf]

I'm trying to do this as an Air desktop app rather than in Flash. However onPlayerLoaded, onChannel, etc. never get called. I see a console message that indicates that ytbridge.swf is loaded. It works fine in Flash. Any ideas?

[lf]

Error #2082 that people are seeing is due to the fact that the flex app listens on a fixed channel name.

[marc]

Hi,
First of all thanks for this post. Everything works great when I test in on my localhost, but whenever I try to upload id on my website, I get a 'broken image' instead of the video on the 'YTPlayer' component.
Any ideas ? I created a youtube api developper key but it's still not working. Thanks for your help.

[Tom]

Hi,

same here: I can't use it in multiple browsers at the same time (object already connected...) and get a broken image instead of the component... Anybody solve these problems?

[Tom]

Ok fixed the broken image, but still can't seem to run it in multiple browsers...

[Garth Somerville]

Tom, as lf said, multiple instances of the demo player do not work because I initially used a single, fixed local connection for messages from the bridge to the Flex app. I have already fixed this and I will try to post an update this week. I have been incredibly busy and have not had time to take this further, not to mention write about all the other interesting Flex topics I have queued up!

[Chris Black]

Great post. Has anybody tried this AS3/Flex library for controlling the YouTube AS2 Player?

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

There has been a lot of interest on this topic recently. Hopefully YouTube will create a AS3 player soon and make life easier for everyone :)

[Chris]

HI all... i have this running currently on an application of mine, with 1 flaw... if there is a video playing another cannot be initialized. this is similar to the comment that Tom has added. I made sure that the local connection names are unique... so i think it has something to do with the api? Even if i grab the url to the flv and paste it into another browser it wont start downloading until i kill the previous window... bugs me out .... has anyone had any success displaying multiple videos?

[nils]

Hello All,
I tried to just rebuild ytbridge.swf and use as it is (without any changes) and found that video doesn't really load. But if I use as it is (without compiling), things works. Any clue what must be happening ?