如何阻止嵌入式Youtube视频同时播放

SoundCloud播放器具有默认功能，当用户启动播放器时，它会自动暂停所有正在播放的其他播放器。（例如：http://jsfiddle.net/Vx6hM/）。如何阻止嵌入式Youtube视频同时播放

我试图重新创建嵌入式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斌用了一半的工作：http://jsbin.com/oxoyes/2/edit

目前，它唯一的召唤其中一个球员。我需要它暂停所有其他玩家，除了玩牌之外。

此外，如何清理和/或做不同/更好的任何提示，都欢迎。我对JavaScript仍然很陌生，所以我甚至不确定我会以正确的方式开展工作。

谢谢！

来源

2012-10-21 Mye

我写了一篇博客文章，详细介绍了响应各种Youtube播放器API事件的完整工作示例：http://www.objectpartners.com/2013/08/21/triggering-a-youtube-video-从点击一个按钮的图像和替换完成时/ –

你只能最多只能有一个玩家在指定时间播放。不要试图暂停所有正在播放的东西，而应该将其视为试图暂停播放。当然，没有人可以玩。鉴于此，请看下面的代码。您需要维护一个外部范围变量，并在需要时暂停，并将其设置为刚刚开始播放的播放器。

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-21 06:26:52 cbayram

完美的作品！ – Mye

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

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次，创造了player.So的9个实例，你我所做的是我将每个实例存储在一个数组中。

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

来源

2012-10-21 06:14:22 fuzionpro

我试过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); 
    }); 
}

来源

2014-05-21 05:30:42

如何阻止嵌入式Youtube视频同时播放

回答

相关问题