4

SoundCloud プレーヤーにはデフォルトの機能があり、ユーザーがプレーヤーを開始すると、現在再生中の他のすべてのプレーヤーが自動的に一時停止されます。(例: http://jsfiddle.net/Vx6hM/ )。

通常の埋め込みコードを介して動的に追加される埋め込み youtube ビデオでこれを再作成しようとしています。

これを使用: https://stackoverflow.com/a/7513356/938089 およびこれ: https://stackoverflow.com/a/7988536/1470827

私はこれまでに得ることができます：

function chain(){

$('.post').each(function(){
    var player_id = $(this).children('iframe').attr("id");
    var other_player_id = $(this).siblings().children('iframe').attr("id");

    player = new YT.Player( player_id, { 

        events:
            {      
            'onStateChange': function (event) 
                {

                if (event.data == YT.PlayerState.PLAYING) 
                    { callPlayer( other_player_id , 'pauseVideo' );
                     alert('Trying to pause: ' + other_player_id);
                    }            

                }
            }        
    });

});

}

これは、半分動作している JS Bin です: http://jsbin.com/oxoyes/2/edit

現在、プレイヤーの 1 人だけを呼び出しています。再生中のプレーヤーを除くすべてのプレーヤーを一時停止する必要があります。

また、これをクリーンアップする方法や、別の方法やより良い方法についてのヒントも大歓迎です。私はまだjavascriptに慣れていないので、正しい方法で行っているかどうかさえわかりません。

ありがとう！

4

3 に答える 3

2

一度にプレイできるプレーヤーは最大で1人だけです。再生中のすべてを一時停止しようとするのではなく、再生中の1つを一時停止しようとしていると考えてください。もちろん、誰も遊んでいない可能性があります。これを踏まえて、次のコードを見てください。単一の外部スコープ変数を維持し、必要に応じて一時停止し、その後再生を開始したばかりのプレーヤーに設定します。

var playerCurrentlyPlaying = null;
function chain(){       
    $('.post').each(function(){
        var player_id = $(this).children('iframe').attr("id");
        player = new YT.Player( player_id, { 
            events:
                {      
                'onStateChange': function (event) 
                    {

                    if (event.data == YT.PlayerState.PLAYING) 
                        { 
                          if(playerCurrentlyPlaying != null && 
                          playerCurrentlyPlaying != player_id)
                          callPlayer( playerCurrentlyPlaying , 'pauseVideo' );
                          playerCurrentlyPlaying = player_id;

                        }            

                    }
                }        
        });
    });
}
于 2012-10-21T06:26:52.637 に答える
1

これはあなたの解決策を達成するかもしれないと思います

var players=[];
 function chain(id){


    var player_id = $('#player'+id).attr('id');


   players[id]=new YT.Player( player_id, { 

        events:
            {      
            'onStateChange': onPlayerStateChange
            }

    });

 }

 function onPlayerStateChange(event){


  var playerid=$(event.target).attr('id');

  if(event.data!=-1 && event.data!=5){

      for(i=1;i<players.length;i++){

       if(playerid!=i){


      players[i].stopVideo();
       }

     }


   }
}

以前のコードの問題は、各 in call 関数を使用して 3*3 回実行する可能性があるため、プレーヤーの 9 つのインスタンスを作成することでした。つまり、各インスタンスを配列に格納しています。

デモ: http://jsbin.com/oxoyes/11/edit

于 2012-10-21T06:14:22.337 に答える