March 27, 2010 8:21 am

Wrapper Class for Youtube Chromeless PlayerWrapper Class for Youtube Chromeless Player

For my second post i have decided to share a wrapper class for the YouTube ActionScript 3 Player that i have created.
Along with the wrapper class is an example of how to use this class in which i use the minimalcomps from BIT-101.
Hope that it helps someone.

Download the example files in .ZIP format here.

package
{
	import com.bit101.components.CheckBox;
	import com.bit101.components.ComboBox;
	import com.bit101.components.HBox;
	import com.bit101.components.HUISlider;
	import com.bit101.components.Knob;
	import com.bit101.components.PushButton;
 
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import luso.api.google.YoutubePlayer;
 
	[SWF( width="500", height="500", frameRate="60", backgroundColor="0xeeeeee" )]
 
	public class YoutubeChromelessPlayer extends Sprite
	{
		private var youtube:YoutubePlayer;
		private var isFirstTime:Boolean = true;
		private var currentTimeSlider:HUISlider;
		private var muteCB:CheckBox;
		private var volumeKnob:Knob;
		private var qualityCB:ComboBox;
		private var playBT:PushButton;
		private var stopBT:PushButton;
		private var pauseBT:PushButton;
		private var toggleBT:PushButton;
 
		public function YoutubeChromelessPlayer()
		{
			if ( stage ) init();
			else addEventListener( Event.ADDED_TO_STAGE, init, false, 0, true );
		}
 
		private function init( e:Event = null ):void
		{
			youtube = new YoutubePlayer( onPlayerReady, onPlayerError, onPlayerStateChange, onVideoPlaybackQualityChange );
			youtube.x = 10;
			youtube.y = 10;
			addChild( youtube );
		}
 
		private function configUI():void
		{
			var hbox:HBox = new HBox( this, 10, 400 );
			hbox.spacing = 10;
			playBT = new PushButton( hbox, 0, 0, "PLAY", onClickPlay );
			stopBT = new PushButton( hbox, 0, 0, "STOP", onClickStop );
			pauseBT = new PushButton( hbox, 0, 0, "PAUSE", onClickPause );
			toggleBT = new PushButton( hbox, 0, 0, "TOGGLE", onClickToggle );
			playBT.width = stopBT.width = pauseBT.width = toggleBT.width = 43;
 
			qualityCB = new ComboBox( hbox, 0, 0, "MEDIUM", null );
			qualityCB.addItem( "SMALL" );
			qualityCB.addItem( "MEDIUM" );
			qualityCB.addItem( "LARGE" );
			qualityCB.addItem( "HD720" );
			qualityCB.numVisibleItems = 4;
			qualityCB.addEventListener( Event.SELECT, onQualityChange, false, 0, true );
 
			var hbox3:HBox = new HBox( this, 350, 400 );
			hbox3.spacing = 10;
 
			muteCB = new CheckBox( hbox3, 0, 5, "MUTE", onMuteChange );
 
			volumeKnob = new Knob( hbox3, 0, -30, "VOLUME", onVolumeChange );
			volumeKnob.showValue = true;
			volumeKnob.minimum = 0;
			volumeKnob.maximum = 100;
			volumeKnob.value = 100;
			volumeKnob.labelPrecision = 1;
 
			var hbox2:HBox = new HBox( this, 10, 450 );
			hbox2.spacing = 10;
 
			currentTimeSlider = new HUISlider( hbox2, 0, 0, "CURRENT TIME", onCurrentTimeChange );
			currentTimeSlider.setSliderParams( 0, youtube.getDuration(), 0 );
			currentTimeSlider.width = 400;
			currentTimeSlider.tick = 1;
			currentTimeSlider.labelPrecision = 1;
			currentTimeSlider.addEventListener( MouseEvent.MOUSE_UP, startEnterFrameAgain );
 
			addEventListener( Event.ENTER_FRAME, onEnterFrame );
		}
 
		private function onQualityChange( e:Event ):void
		{
			if ( qualityCB.selectedIndex == 0 )
			{
				youtube.setPlaybackQuality( YoutubePlayer.SMALL );
			}
			else if ( qualityCB.selectedIndex == 1 )
			{
				youtube.setPlaybackQuality( YoutubePlayer.MEDIUM );
			}
			else if ( qualityCB.selectedIndex == 2 )
			{
				youtube.setPlaybackQuality( YoutubePlayer.LARGE );
			}
			else if ( qualityCB.selectedIndex == 3 )
			{
				youtube.setPlaybackQuality( YoutubePlayer.HD720 );
			}
		}
 
		private function onVolumeChange( e:Event ):void
		{
			youtube.setVolume( volumeKnob.value );
		}
 
		private function startEnterFrameAgain( e:MouseEvent ):void
		{
			addEventListener( Event.ENTER_FRAME, onEnterFrame );
		}
 
		private function onEnterFrame( e:Event ):void
		{
			currentTimeSlider.value = youtube.getCurrentTime();
		}
 
		private function onMuteChange( e:Event ):void
		{
			youtube.toggleMute();
		}
 
		private function onCurrentTimeChange( e:Event ):void
		{
			removeEventListener( Event.ENTER_FRAME, onEnterFrame );
			youtube.seekTo( currentTimeSlider.value, true );
		}
 
		private function onClickPlay( e:MouseEvent ):void
		{
			youtube.playVideo();
		}
 
		private function onClickPause( e:MouseEvent ):void
		{
			youtube.pauseVideo();
		}
 
		private function onClickStop( e:MouseEvent ):void
		{
			youtube.stopVideo();
		}
 
		private function onClickToggle( e:MouseEvent ):void
		{
			youtube.toggleVideo();
		}
 
		private function onPlayerReady( event:Event ):void
		{
			trace( "player ready:", Object( event ).data );
			youtube.setSize( 480, 360 );
			//youtube.cueVideoById("NqOiEZn7p_Y");
			youtube.loadVideoById( "NqOiEZn7p_Y" );
		}
 
		private function onPlayerError( event:Event ):void
		{
			trace( "player error:", Object( event ).data );
		}
 
		private function onPlayerStateChange( event:Event ):void
		{
			trace( "player state:", Object( event ).data );
			if ( Object( event ).data == "1" && isFirstTime )
			{
				isFirstTime = false;
				configUI();
			}
		}
 
		private function onVideoPlaybackQualityChange( event:Event ):void
		{
			trace( "video quality:", Object( event ).data );
		}
	}
}

If you have any doubts or ideas leave a comment and i will try to answer as soon as i can.

4 comments to Wrapper Class for Youtube Chromeless Player