youtube - 如何使用 Flash builder 4.6 在 youtube chromeless 播放器上显示自定义播放器控件？

Question

我有一个初始化 youtube cloud api 的 View 组件使用“http://www.youtube.com/apiplayer?version=3&modestbranding=1”网址并全屏播放视频。它在 s:actionContent 下有播放、暂停和进度条，但我试图在 chromeless 播放器的顶部放置“倒带”、“播放/暂停”、“前进”和交互式进度条本身(带有相同图像按钮的透明弹出窗口)，如下图所示。

初始化 youtube api 的我的 View 组件没有任何项目。 (删除了 s:actionContent 以尝试弹出窗口)

<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 to add a event listener on the 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>

需要此弹出管理器的帮助，以便在用户点击正在播放的视频时出现在 chromeless 播放器的顶部。

<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 get 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>

任何帮助将不胜感激。 :)

我刚刚开始使用 Flash Builder 的 spark 组件，如果我的问题太蹩脚，请原谅我。

或者是否有任何链接/教程可用于将播放器控件放置在 chromeless youtube 播放器之上？

更新:我能够解决我的问题，也提供了我的解决方案

Answer 1

您应该能够向整个 View 添加点击监听器。虽然我以前从未使用过这个 API，但我想它看起来像这样:

<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>