der hess

I was very pleased that YouTube released a ActionScript 3 API for their Chromeless Player. I looked at some availabe code snippets on different blogs and unfortunateley, I had to realize that the API is not really object-oriented and a little bit annoying to work with (because of the missing code completion).

My current project - an independent Web Video Player - is still using the old workaround YouTube API Tubeloc and I have to change this. That is the reason why I created a Flex Component for the new YouTube AS3 API. If you would like to use my code for your Flex or Air projects, please feel free to use it and if you will find some bugs, please leave a comment!

Now I will start with some explanations of my code. I create 4 classes, which manage the whole YouTube Chromeless API. The class YouTubeAs3 contains all the most important functions and is based on the Flex Framework(!). The classes AirYouTube and FlexYouTube extends the YouTubeAs3 class. Both classes are Flex Framework based classes. I had to divide the YouTubeAs3 class into these 2 classes, because the Adobe Air environment don't support the command Security.allowDomain() and it is cleaner to use this command for a web-based projects. So therefore please use the FlexYouTube component for web-based projects and the AirYouTube component for your Air projects. The fourth class FlashYouTube is an only Flash plattform based class, that should be very handy to use for non-Flex projects.

The other classes just simplify the coder's life. So I created some static classes for the various video quality parameters (YouTubeVideoQuality Class), the various PlayerStates (YouTubePlayingState), the YouTube errors (YouTubeError) and of course the available YouTube events (YouTubeEvent).

I wrote an example application for you, which should be very easy to understand. In this very small Flex application you can stop, play and pause the YouTube videos:

//----------------------------------
//  YouTube Player Control
//----------------------------------
private function handlePlay(event:MouseEvent):void
{
	youTubePlayer.playVideo();
	this.addEventListener(Event.ENTER_FRAME,handlePlayingTime);
}
 
private function handlePause(event:MouseEvent):void
{
	youTubePlayer.pauseVideo();
	this.removeEventListener(Event.ENTER_FRAME,handlePlayingTime);
}
 
private function handleStop(event:MouseEvent):void
{
	youTubePlayer.stopVideo();
	this.removeEventListener(Event.ENTER_FRAME,handlePlayingTime);
}
 
// frame-based Intervall for showing loading and playing process
private function handlePlayingTime(e:Event):void
{
	labelTime.text = youTubePlayer.getCurrentTime() + " / " + youTubePlayer.getDuration();
 
	progresPlayingVideo.minimum = 0;
	progresPlayingVideo.maximum = youTubePlayer.getDuration();
	progresPlayingVideo.setProgress(youTubePlayer.getCurrentTime(),youTubePlayer.getDuration());
 
	progressLoadVideo.minimum = 0;
	progressLoadVideo.maximum = youTubePlayer.getVideoBytesTotal();
        progressLoadVideo.setProgress(youTubePlayer.getVideoBytesLoaded(), youTubePlayer.getVideoBytesTotal());
}

Some behaviours of this Flex-based YouTube component is adjusted for the Flex Framework. If you would like to change the size of the YouTube Player, you can use the witdh and height properties of the component. Furthermore there exists some other properties:

[Bindable] public var volume:int;  // Value between 0 and 100
[Bindable] public var playerState:Number; // Read-only!!!!
[Bindable] public var playbackQuality:String; // Use the static variables of the YouTubeVideoQuality class

Handling and managing of the YouTubeEvents are the last thing I would like to explain. I support the same 4 events, which the YouTube API supports. The only difference is that I wrapped the data of the events in a special YouTube Event for an simpler event handling and code completion.

[Event(name="youtubeStatus", type="de.derhess.video.youtube.YouTubeEvent")]
[Event(name="youtubePlayerLoaded", type="de.derhess.video.youtube.YouTubeEvent")]
[Event(name="youtubeError", type="de.derhess.video.youtube.YouTubeEvent")]
[Event(name="youtubeVideoQuality", type="de.derhess.video.youtube.YouTubeEvent")]

So here I is my code of my app. I think it is very self-explanatory...

 /* Here should be some code but wordpress always crashed
because of parsing problems... Please download the code
and look at line number 23-112 in the src folder the file
flex_youTube.mxml */

The rest of the functions contains exactly the same functionality as the YouTube API. If something ambiguous, please look at the YouTube API documentation or leave a comment. THX!

Download the Flex YouTube components and source code

Related posts:

1. Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
2. Working with Vimeo Moogaloop API in Flash
3. Die Gretchenfrage: Wann Flash und wann Flex?
4. My most important Twitter Messages #6
5. An Adobe Air Component for the Vimeo Moogaloop API