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

[Chris Sprague]

Hi guys,

Anyone had any luck with multiple videos on either firefox or IE? I've tried loading up two module instances (wrapping ytbridge inside a module and loading up one module/concurrent video), ensuring that local connection names are unique etc...

No dice, only one video loads per stage.

I've heard queuing requests to the same ytbridge/google api instances may work - but I haven't wanted to go that far.

http://groups.google.com/group/youtube-api-gdata/browse_thread/thread/c6a4f062e71704ad

Thanks in advance.

[Tom]

Hi,

I'm having a problem using the seek function before loading the video. It used to work and without changing anything it does not work anymore (it starts at 0 and the seek function only works during playback). I checked the demo and it does not work here anymore as well. Is this because Youtube changed something in their API? Some help would be welcome...

[Tom]

I'm guessing youtube fixed the problem because it seems to work again...