Making a custom YouTube player with Flex

DOWNLOAD THE SOURCE CODE

VIEW THE DEMO

YouTube has a number of official API platforms available for querying it's video database. Flash/Flex is not one of those platforms, but that hasn't stopped a number of 3rd party API's being developed to fill the gap.

At first glance you might be tempted to use the as3youtube library, created by Adobe and then given to the open source community. Unfortunately this library uses the old YouTube interface, and YouTube are no longer giving out API keys for the old system. If you try to use as3youtube with one of the new keys then you'll get the cryptic message "Bad, unknown, or disabled dev_id specified".

Fortunately there are replacements. The as3youtubelib (the names are very similar, but it is a different from as3youtube) library works with the new YouTube interface. Using as3youtubelib we can search the YouTube video database and get the details of an individual video required to play it.

Actually playing a YouTube video requires another 3rd part library called TubeLoc. TubeLoc provides a Flex component that we can add to the GUI, and will play a YouTube video when supplied with the video id.

Download and extract the as3youtubelib library from here.

Download and extract the TubeLoc library from here.

Create a new Flex application and add the two libraries to the Flex project Flex Build Path option.

Add a TileList, a Movie and three Buttons to create a GUI like the one shown in the screenshot below. The black rectangle in the screenshot is the Movie element.

Create a new MXML component called Thumbmail.mxml, and add the following code. This component defines the appearance of the individual tiles that will be displayed in the TileList.

<?xml version="1.0"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"

width="200" height="208"

horizontalScrollPolicy="off"

verticalScrollPolicy="off"

useHandCursor="true" buttonMode="true">

<mx:Image id="img"

height="86"

source="{data.media.thumbnails.first().url}"

scaleContent="false"

creationCompleteEffect="Fade" top="10" left="10" right="10"/>

<mx:Text text="{data.title}"

height="68"

fontWeight="bold"

textAlign="left"

fontSize="11"

creationCompleteEffect="Fade"

color="#c46200"

themeColor="#fc8010"

selectable="false" top="130" left="10" right="10"/>

<mx:Text text="{data.authors.first().name}"

color="#6a665b"

textAlign="left"

selectable="false" left="10" right="10" top="104"/>

</mx:Canvas>