如何阻止嵌入式Youtubevideo同时播放

SoundCloud播放器具有默认function，当用户启动播放器时，它会自动暂停当前播放的所有其他播放器。 （例如： http ： //jsfiddle.net/Vx6hM/ ）。

我正在尝试使用通过普通嵌入代码动态添加的嵌入式YouTubevideo重新创建此video。

使用此： 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 

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

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

Answer 3

我尝试了cbayram发布的方式，发现它取得了不小的成功。 我更喜欢fuzionpro的方式，但不得不纠正一些问题，而且我提出了以下内容，它运行良好，包括console.logs，所以你可以看到发生了什么。 将下面的ytPlayers和ytPlayerStates结合起来可能会提高效率。

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