Update Feb 27, 2009
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?
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.
- 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.