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>