Question

我有一个View组件，使用“youtube cloud api”url初始化http://www.youtube.com/apiplayer?version=3&modestbranding=1并播放全屏视频。它在s:actionContent下有播放，暂停和进度条，但我试图在无边框播放器本身上放置“倒带”，“播放/暂停”，“前进”和交互式进度条（透明弹出窗口）图像按钮相同），如下图所示。 enter image description here

初始化youtube api的My 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>

当用户点击播放视频时，需要此弹出式管理器的帮助才能显示在无边框播放器之上。

<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

您应该能够在整个视图中添加点击侦听器。虽然我之前从未使用过这个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>

Answer 2

所以你快到了。您需要记住的是，YouTube播放器有自己的互动，例如当用户点击视频时，它通常会暂停/恢复。现在，您可以通过在视频顶部放置一个不可见的Sprite来解决此问题，因为这样可以捕获用户的鼠标移动和点击。

唯一的问题是当前的自动播放状态;目前（以及未来我猜）自动播放器不算作视频的视图。用户需要按YouTube视频上的播放按钮才能将该计数视为视图。

所以我所做的只是在播放开始后添加这个不可见的Sprite。然后，当用户点击您不可见的Sprite时，您也可以聪明地向播放器发送暂停/恢复事件。

关于您所追求的UI组件：它们非常容易组合在一起，您可以随时获取标准的UI Flash / Flex组件并将它们连接到播放器API（我看到您已经开始） ;但是，在你的头脑中设计一个设计而不是在代码中一遍又一遍地勾勒出UI，这总是一个好主意。

作为脚注：欢迎您使用我的中间件课程在github上使用YouTube播放器：https://github.com/ahmednuaman/AS3/blob/master/com/firestartermedia/lib/as3/display/component/video/YouTubePlayerAS3.as

Answer 3

解决我的问题

我有一个PlaylistsView.mxml，其中包含一个包含所有视频的列表。点击后，它会推送一个名为YtPlayView.mxml

的新视图

<!--YtPlayView.mxml-->  
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:popup="views.popup.*"
    title="{data.title}" viewActivate="init()" viewDeactivate="deactivateYoutubePlayer()">
    <fx:Script source="ytfeeds/YoutubePlayer.as"/>
    <fx:Script>
        <![CDATA[
            public function deactivateYoutubePlayer():void{
                PopUpManager.removePopUp(ytcPopup);
                dispose();
            }
        ]]>
    </fx:Script>
</s:View>

在YoutubePlayer.as，onPlayerReady(event:Event)我添加了一个鼠标点击事件监听器player.addEventListener(MouseEvent.CLICK,showPlayerControl);

    <!--YoutubePlayer.as contents-->
public function showPlayerControl(event:MouseEvent):void{
    ytcPopup=new PlayerControls();
    ytcPopup.player=player;
    ytcPopup.duration=data.duration;                
    ytcPopup.currentPosition="00:00:00";        
    ytcPopup.open(this,true);
    ytcPopup.width = this.stage.width;
    ytcPopup.setStyle("modalTransparency",0);
    ytcPopup.setStyle("modalTransparencyBlur",3);
    ytcPopup.setStyle("modalTransparencyColor", "#ff0000");
    if(ytcPopup.player.getPlayerState()==1){        
        ytcPopup.playPauseBtn.setStyle("icon",ytcPopup.iconPause);
    }
    else if(ytcPopup.player.getPlayerState()==2){       
        ytcPopup.playPauseBtn.setStyle("icon",ytcPopup.iconPlay);
    }
    ytcPopup.y = this.stage.height-195;
    PopUpManager.bringToFront(ytcPopup);        
    if(player.getCurrentTime()!=0)
        ytcPopup.ytVideoSlider.value=player.getCurrentTime();       
}

这给了我类似下面的内容（这是一个纵向视图，在景观视图中它出现在视频之上）

如果有人想要更多源代码或帮助，我会很乐意提供帮助:)只需发表评论。

enter image description here

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

3 个答案: