FLEX{er}

Chromeless Youtube Video Player for Flex

Stelian Crisan | 24.12.09 | 6 Comments

This Flex component allow you to play Youtube movies into you Flex applications and also to be able to customize the look of your player. Actually I put a main movie component and two control sections, one for: play, stop, mute, unmute and time figures (current second and total number of seconds of the movie); the other one it’s for a visual playing time.

The Youtube API for ActionScript 3.0 (this is for Flash, but it’s working also in Flex) that I used it’s available on Google Code at: http://code.google.com/apis/youtube/flash_api_reference.html. Youtube API for Flash and ActionScript 2 it’s available at: http://code.google.com/apis/youtube/flash_api_reference_as2.html.

I implement almost all functions available on this API (see Youtube class), but for this example I use just the basics ones. Also you will see that are some skins for buttons, that you can use.

In order to change the Youtube video ID just go to init() function into ChromelessYoutubeVideoPlayer.mxmml file and change the value._youtube it’s player component, and we set to this the ID value, also we add this to the canvas where this will be in design.

//set video ID
_youtube.videoId = "D-wvgqDWjnk";
_playerArea.addChild(_youtube);

The size of played move it’s set for the moment on Youtube class. It’s better to set the sive before movie starts to play, also, using this API, you can set the playback quality (small, medium, large, hd720) and to see the state of the movie ( unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5) ).

private function onPlayerReady(event:Event):void {
// Event.data contains the event parameter, which is the Player API ID
trace("player ready:", Object(event).data);
 
// Once this event has been dispatched by the player, we can use
// cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
// to load a particular YouTube video.
_player = _loader.content;
//load our video ID
_player.loadVideoById(_videoId);
//set movie size
_player.setSize(480,270);
}

I think that it’s better to download the source code, and just try to see how it’s work.

Share and Enjoy:

ChromelessYoutubeVideoPlayer

ChromelessYoutubeVideoPlayer (1)

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Tags: actionscript 3, api, chromeless, player, video, youtube

This post was written by Stelian Crisan

Views: 4075

6 Comments

On 12.26.09 derhess.de - Florian wrote these pithy words:

Hey thx for this tutorial. I was a little sick of this YouTube API and created some Component for Flex and Air. That makes the developer life a little bit easier for working with youTube. Maybe you will like it, too?!

http://blog.derhess.de/2009/10/27/the-new-youtube-as3-chromeless-api-in-flex-air-flash/

On 12.31.09 Will F wrote these pithy words:

Hi, i am probably being really stupid here, but it is driving me crazy. Where do i download the youtube API from? I can’t find any download links on the site.

Thanks

On 12.31.09 Stelian Crisan wrote these pithy words:

Hi Will F,

Thank you for this comment because I just noticed that I don’t put the source code for this article . Now it’s there.

About YouTube API download: You can’t download the API, you will load a player object from youtube.com. The code section that do this is in Youtube.as file in the source archive. Anyway I will put it in this comment:

[Bindable]
private var _loader:Loader; 
private var _player:Object;  
 
.....................
 
 public function Youtube()
{ 
    super();
 
    //allow domains
    Security.allowDomain("www.youtube.com");
    Security.allowDomain("video-stats.video.google.com");
 
    //load youtube api
    _loader  = new Loader();
    _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderInit);
    _loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
 
    //add loader to our component
    addChild(_loader);  
} 
 
.....................
 
//set events for our movie
private function onLoaderInit(event:Event):void 
{
      _loader.content.addEventListener("onReady", onPlayerReady);
     .....................
}
 
private function onPlayerReady(event:Event):void 
{
    // Once this event has been dispatched by the player, we can use
    // cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
    // to load a particular YouTube video.
    _player = _loader.content;
    //load our video ID
    _player.loadVideoById(_videoId);
    ..................... 
}

On 12.31.09 Will F wrote these pithy words:

Great thanks a lot That’s really helped me.

On 01.22.10 sharedtut wrote these pithy words:

thank you for sharing and fixing the source code

On 02.26.10 windhood (wenhu guan) wrote these pithy words:

another youtube player sample http://www.flexer.info/2009/12/24/chromeless-youtube-video-player-for-flex/

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Open Source Media Framework (OSMF) Version 0.8 is Now Available

How It’s Made – Mark Anders