flex4 - How to display custom player controls on youtube chromeless player using Flash builder 4.6? -
i have view component initialises youtube cloud api using "http://www.youtube.com/apiplayer?version=3&modestbranding=1" url , plays video fullscreen. has play, pause , progress bar under s:actioncontent, trying put "rewind", "play/pause", "forward" , interactive progress bar on top of chromeless player (transparent popup image buttons same), below image. 
my view component initialises youtube api not have items. (removed s:actioncontent try out popup)
<s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="youtubevideoplay" viewactivate="init()" > <fx:script source="youtubeplayer.as"/> <fx:script> <![cdata[ //navigator.addeventlistener(touchevent.touch_begin,showplayercontrol); how add event listener on youtube player? public function showplayercontrol():void{ popupmanager.addpopup(playercontrols,player); } ]]> </fx:script> <fx:declarations> <!-- place non-visual elements (e.g., services, value objects) here --> </fx:declarations> </s:view> need popup manager appear on top of chromeless player, when user taps on playing video.
<s:panel xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" width="400" height="300"> <fx:script source="../youtubeplayer.as"/> <fx:declarations> <!-- place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <fx:style> @namespace s "library://ns.adobe.com/flex/spark"; global { modal-transparency: 0.0; modal-transparency-color: white; modal-transparency-blur: 0; } </fx:style> <fx:script> <![cdata[ import mx.managers.popupmanager; /*[bindable][embed(source="view/assets/images/play32.png")] public static var iconplay : class;*/ [bindable][embed(source="view/assets/images/pause32.png")] public static var iconpause : class; [bindable][embed(source="view/assets/images/forward32.png")] public static var iconforward : class; [bindable][embed(source="view/assets/images/rewind32.png")] public static var iconrewind : class; //addeventlistener(flexmouseevent.mouse_down_outside,removeplayercontrols); /*private function removeplayercontrols(event:flexmouseevent):void { popupmanager.removepopup(this); }*/ public function closeandbackup():void { dispose(); navigator.popview(); } public function initandplay():void { player.playvideo(); } private var _duration:string = ""; [bindable] public function duration():string { return _duration; } public function set duration(val:string):void { _duration = val; } protected function ytvideoslider_changehandler(event:event):void { // todo auto-generated method stub trace(event.currenttarget.value); player.seekto(event.currenttarget.value,true); } ]]> </fx:script> <s:vgroup> <s:hgroup> <s:layout> <s:horizontallayout paddingtop="10" paddingleft="10"/> </s:layout> <s:hslider id="ytvideoslider" livedragging="true" datatipprecision="1" maximum="{duration}" change="ytvideoslider_changehandler(event)"/> <s:label text="{math.round(ytvideoslider.value)}"/> </s:hgroup> <s:button icon="{iconrewind}" click="player.playvideo()"/> <s:button icon="{iconpause}" click="player.pausevideo()"/> <s:button icon="{iconforward}" click="closeandbackup()"/> </s:vgroup> </s:panel> any appreciated. :)
i have started flash builder's spark components, pardon me if question lame.
or there link/tutorial available place player controls on top of chromeless youtube player?
update: able solve problem, , provided solution too
you should able add click listener entire view. while have never used api before, imagine this:
<s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="youtubevideoplay" viewactivate="init()" click="showplayercontrol()"> <fx:script source="youtubeplayer.as"/> <fx:script> <![cdata[ public function showplayercontrol():void{ popupmanager.addpopup(playercontrols,player); } ]]> </fx:script> <fx:declarations> <!-- place non-visual elements (e.g., services, value objects) here --> </fx:declarations>
Comments
Post a Comment