Everybody loves youtube, for its almost unlimited source of music video’s and its funny clips. So how can we get those clips into our Flex or Air app? Here’s one way how to do it:

First off, you need a couple of packages: you will need the Adobe serialization and webapis classes, the Tubeloc classes for the player, and the newcommerce.ca package to get the clips from the web to your application. I won’t create a complete application, because you can do whatever you want with it, but you can download an example: the youtube desktop player here (it is still in beta, I know about the transparency issues in air and flex 4, when it get’s fixed, an update will be released). So download the packages here, unzip them and put them in your source folder or include them in the class-path. Also, keep in mind that this tutorial is based on a Flex 4 application, so if you’re still in Flex 3, there are some subtle differences.

1. How to handle a search for youtube video’s:

protected function doSearch():void
{
_ws = YouTubeFeedClient.getInstance();
_ws.addEventListener(VideoFeedEvent.VIDEO_DATA_RECEIVED, handleSearchResults);
_requestId = _ws.getVideos(searchTherm, "", null, null, ["music"], ["all"], YouTubeFeedClient.ORDER_BY_RELEVANCE, YouTubeFeedClient.RACY_INCLUDE);
}

_ws is a globally declared var typed as YouTubeFeedClient and _requestId is just a globally declared Number. We also added a handler to the YouTubeFeedClient instance to handle our results.

2. Handle the results of our search

protected function handleSearchResults(evt:VideoFeedEvent):void
{
if(_requestId == evt.requestId)
{
       	var feed:VideoFeed = evt.feed;
     	var video:VideoData;
       	tubes = new ArrayCollection();
       	while(video = feed.next())
       	{
              	var o:Object = new Object();
              	o.url = video.media.mediaPlayerUri.substr(31,video.media.mediaPlayerUri.length);
               	o.thumbnail = video.media.thumbnails.next().url;
               	o.title = video.media.title;
               	tubes.addItem(o);
       	}
}
else
{
     	trace("this request:"+evt.requestId+" is not ours. we'll wait for the next one");
}
}

What happens here is the creation of Objects, which are put in the tubes arraycollection. They will be used as the dataprovider for thumbnails. Make sure to create your own itemrenderer for this.
So now we have our clips in the tubes arraycollection, now let’s play see how we can play one. Of course you can also create a nice valueObject for this

3. Playing a clip

protected function startPlaying():void
{
	var youtube:YouTubeServiceEvent;
 
        if(isPlaying)
	{
	        if(isReallyPlaying)
		        youtubeMovie.loadVideoById(vidId);
		else
			isReallyPlaying = true;
	}
	else
	{
		player = new Canvas();
		player.width=640;
		player.height=480;
 
		youtubeMovie = new MovieSprite(null,true);
		youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
 
		youtubeMovie.x = 0;
		youtubeMovie.y = 0;
		player.rawChildren.addChild(youtubeMovie);
		holder.addElement(player);
		isPlaying = true;
 
	}
}

I know, the isPlaying/isReallyPlaying double Boolean solution isn’t the prettiest one, but it does work If you have a better one, feel free to let me know! It handles the starting of a new clip when another one is already playing. Also, if you’re working with Flex 3, you don’t need the “holder” line, this is just for flex4 to add a canvas to a group. Now we just need to work out the handler we added to the MovieSprite.

4. handling of the PlayerReadyEvent

protected function onPlayerReady(event_p:PlayerReadyEvent):void
 {
	youtubeMovie.width = 640;
	youtubeMovie.height = 480;
 
	youtubeMovie.loadVideoById(vidId);
	youtubeMovie.playVideo();
 
}

So this handles the loading of the video when the player is ready to receive. Normally you know have your arraycollection which you can bind to some sort of gallery to have thumbnails after searching, and a player which you can use to display the clips in your application. If you have any questions or remarks, you’re more then welcome to leave a comment !