3

「 http://www.youtube.com/apiplayer?version=3&modestbranding=1 」URLを使用してYouTubeクラウドAPIを初期化し、ビデオをフルスクリーンで再生するViewコンポーネントがあります。の下に再生、一時停止、進行状況バーがありますが、「巻き戻し」、「再生/一時停止」、「進む」、およびインタラクティブな進行状況バーをクロムレスプレーヤー自体の上に配置しようとしています(同じ画像ボタンのある透明なポップアップ)、下の画像のように。 s:actionContentここに画像の説明を入力

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 コンポーネントを使い始めたばかりなので、質問が不十分でしたらご容赦ください。

または、クロムレス YouTube プレーヤーの上にプレーヤー コントロールを配置するためのリンク/チュートリアルはありますか?

更新:問題を解決でき、解決策も提供しました

4

3 に答える 3

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>

于 2013-04-22T22:27:42.980 に答える
1

それで、あなたはもうすぐそこにいます。覚えておく必要があるのは、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

于 2013-04-27T19:25:05.503 に答える
0

私の質問に対する解決策

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.asonPlayerReady(event:Event)mouseclick イベントリスナーを追加します。 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();       
}

これにより、以下のようなものが得られます(縦向きのビューで、横向きのビューではビデオの上に表示されます)

誰かがより多くのソース コードやヘルプが必要な場合は、喜んでお手伝いします :) コメントをドロップしてください。

ここに画像の説明を入力

于 2013-04-29T05:55:40.667 に答える