28
Nov
2008

YouTube Chromeless player under Flex

Here is a code to show you how to integrate the YouTube Chromeless player with Flex. This work is based on the sample shown at this page http://code.google.com/apis/youtube/articles/youtube_as3_chromeless.html.

You can download the source code of this file here.
Please note : to get this to work, you may serve the bin-release/index.htm through a webserver (IIS, Apache, whatever …)

Here is the mxml file of the project

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="660" height="580" backgroundColor="white">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import flash.sampler.NewObjectSample;
 
			import flash.display.*;
			import flash.events.*;
			import flash.text.*;
			import timber.demo.*;
			import choppingblock.video.*;
 
			private var _youTubeLoader:YouTubeLoader;
			private var _timer:Timer;
			private var _draggingSeeker:Boolean = false;
			function init():void {
				_youTubeLoader = new YouTubeLoader(); 
				_youTubeLoader.addEventListener(YouTubeLoaderEvent.LOADED, youTubePlayerLoadedHandler, false, 0, true);
				_youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler, false, 0, true);
				_youTubeLoader.create();
				_youTubeLoader.x = 5;
				_youTubeLoader.y = 5 ;
				mainUI.addChild(_youTubeLoader);
				_timer = new Timer(500);
				_timer.addEventListener(TimerEvent.TIMER,timerTick);
			}
 
			private function youTubePlayerLoadedHandler (event:YouTubeLoaderEvent):void{
				_youTubeLoader.loadVideoById("SQ1ys3MxaEM");
 
			};
 
			private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
			if (event.state=="playing") {
				sli_seek.visible = true;
				sli_seek.minimum = 0;
				sli_seek.maximum = _youTubeLoader.getDuration();
				sli_seek.value=0;
				btn_pause.visible=true;				
				_timer.start();
			}
			};
 
			private function timerTick(event:TimerEvent):void {
				if (!_draggingSeeker) {
				sli_seek.value = _youTubeLoader.getCurrentTime();
				}				
			}
 
			private function seekChanged():void {
				_youTubeLoader.seekTo(sli_seek.value);
			}
 
		]]>
	</mx:Script>
	<mx:UIComponent id="mainUI">
 
	</mx:UIComponent>
	<mx:HSlider id="sli_seek" x="150" height="30" y="485" visible="false" width="490" change="seekChanged()" thumbDrag="_draggingSeeker=true;" thumbRelease="_draggingSeeker=false;">
 
	</mx:HSlider>
 
	<mx:Button id="btn_play" x="5" y="490" visible="false"
              		useHandCursor="true"
              	overSkin="@Embed(source='../assets/playpause.swf', symbol='play_over')"
     			upSkin="@Embed(source='../assets/playpause.swf', symbol='play_up')" 
     			downSkin="@Embed(source='../assets/playpause.swf', symbol='play_down')"            	
              	click="_youTubeLoader.play();btn_pause.visible=true;btn_play.visible=false;"/>
	<mx:Button id="btn_pause" x="5" y="490" visible="false"
              		useHandCursor="true"
              	overSkin="@Embed(source='../assets/playpause.swf', symbol='pause_over')"
     			upSkin="@Embed(source='../assets/playpause.swf', symbol='pause_up')" 
     			downSkin="@Embed(source='../assets/playpause.swf', symbol='pause_down')"            	
              	click="_youTubeLoader.pause();btn_play.visible=true;btn_pause.visible=false;"/>              	
 
</mx:Application>
Ecrit par julien dans : Flex | Tags : , ,

Pas de commentaire »

Flux RSS des commentaires pour cet article. URL de TrackBack

Laisser un commentaire

Propulsé par WordPress | Thème Aeros | TheBuckmaker.com WordPress Themes | Traduction WordPress tuto