如何停止嵌入式YouTube视频同时播放

Question

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

目前，它唯一呼叫其中一名球员。我需要它暂停所有其他玩家，除了玩一个。

另外，欢迎有关如何清理和/或这样做的任何技巧。我仍然是JavaScript的新手

谢谢！

Answer 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;
                        }            
                    }
                }        
        });
    });
}

Answer 2

我认为这可能会实现您的解决方案

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();
       }
     }

   }
}

您以前的代码的问题是您在呼叫函数中使用每个代码的位置，因此可以执行3*3次，因此创建9个播放器实例。因此，我所做的就是我将每个实例存储在数组中。

演示：http：//jsbin.com/oxoyes/11/edit

Answer 3

我尝试了cbayram发布的方式，发现它取得了成功。我更喜欢Fuzionpro的方式，但必须纠正一些带有IT的问题，然后我出现了以下内容，它运行良好并包含console.logs.logs，以便您可以看到发生了什么。在下面结合了ytplayers和ytplayertes会使它更加有效。

// load the IFrame Player API code asynchronously
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var ytPlayers = new Array();
var ytPlayerStates = new Array();
window.onYouTubePlayerAPIReady = function()
{
    jQuery('.video-container>iframe').each(function(index)
    {
        var iframeID = jQuery(this).attr('id');
        ytPlayerStates[iframeID] = -1;
        (function (iframeID) {
            ytPlayers.push(new YT.Player(iframeID, { 
                events:
                {      
                    'onStateChange' : function (event) 
                    {
                        console.log(iframeID+' '+event.data);
                        if (event.data == 1)
                        {
                            ytPlayerStates[iframeID] = 1;
                            for (var key in ytPlayerStates)
                            {
                                if (key != iframeID)
                                {
                                    if (ytPlayerStates[key] == 1 || ytPlayerStates[key] == 3)
                                    {
                                        ytPlayerStates[key] = 2;
                                        callPlayer(key, 'pauseVideo')
                                    }
                                }
                                console.log(key+' : '+ytPlayerStates[key]);
                            };
                        }
                    }
                }
            }));
        })(iframeID); 
    });
}