Javascript 同步多个YouTube视频'；s

一次播放多个YouTube的最佳方式是什么？我希望它们以毫秒同步，因此不会受到缓冲问题或不同长度广告的影响

更新1:

如果我能回答以下问题，我想我的问题会得到充分的回答：

当视频能够播放时，您如何使用YouTube的javascript API进行检测（视频已缓冲到足以播放/广告未播放/视频未因任何其他原因停止）

更新2:

YouTube同步的基本思想是由。唯一缺少的是视频的同步更加精确，而SwigView并没有在这方面做得很好

---

我开始怀疑使用当前的API是否可能，我正在寻找替代方法。

通过定期测量和调整两个播放器之间的时差，可以在0.2秒或更好的公差范围内同步两个YouTube iFrame API播放器。例如，通过将一个播放器的播放速度加倍或减半，并在X/2毫秒后将其设置回正常速度，可以非常精确地调整X毫秒的时差。可以从常规API曲目中添加用于用户交互（停止、播放、暂停）的助手。他们还包括广告，因为他们暂停球员

澄清的守则：

script.js

//玩家们
var-player1；
var-player2；
//规则
var syncThreshold=0.2；//秒，可接受时间差的阈值，以防止不停止同步
var jumpThreshold=2；//秒，应通过粗跳纠正的时差阈值
var jumpDeadTime=500；//毫秒，我们在跳转后不同步的死区时间
//超时和间隔
var-timeSyncInterval；
var syncActionTimeout=未定义；
//一旦准备好，YouTube API就会调用它
函数onyoutubeiframeapiredy（）{
player1=新的YT.Player（'somediv1'{
videoId:'zkv-_LqTeQA'，
活动：{
onReady:syncTime，
onStateChange:syncStateChange
}
});
player2=新的YT.Player（'somediv2'{
videoId:'zkv-\u LqTeQA'
});
}
//同步魔法
函数syncTime（）{
//确保由于某些原因尚未设置同步间隔
clearInterval（timeSyncInterval）；
//设置一个1s的时间间隔，在这个时间间隔内，我们检查播放器是否同步，必要时是否正确
timeSyncInterval=setInterval（函数（）{
//如果已经设置了超时，那么我们已经在尝试同步播放机，因此不必再次同步
如果（syncActionTimeout==未定义）{
//测量时间差并计算同步操作的持续时间
var time1=player1.getCurrentTime（）；
var time2=player2.getCurrentTime（）；
var时差=时间2-1；
var timeDifferenceAmount=Math.abs（时差）；
var syncActionDuration=1000*timeDifferenceAmount/2；
if（时差装载>跳线阈值）{
//球员们相距太远，我们必须跳远
log（“玩家是“+时差装载+”分开，跳跃。”）；
player2.seekTo（player1.getCurrentTime（））；
//我们给玩家一小段时间在跳跃后开始播放
syncActionTimeout=setTimeout（函数（）{
syncActionTimeout=未定义；
}，跳线死区时间）；
}否则如果（时差>同步阈值）{
//玩家2比玩家1领先一点，使玩家2的速度减慢
log（“播放器2在播放器1之前是“+时差+”s。同步”）；
player2.setPlaybackRate（0.5）；
//设置两个播放器同步时准确触发的超时
syncActionTimeout=setTimeout（函数（）{
//球员现在应该是同步的，这样我们就可以回到正常速度
player2.设置回放速率（1）；
syncActionTimeout=未定义；
}，持续时间）；
}else if（时差）很长，但你找到解决方案了吗？@Beneverad我从来没有找到过。我继续创建自己的（html5）视频系统。明白了，谢谢你的回答：-）@Joren:嗨，我也在寻找解决方案。如果这是一个公共项目，你解决了这个问题，请发布一个链接。非常感谢所有的帮助，谢谢
// the players
var player1;
var player2;

// the rules
var syncThreshold=0.2; // seconds, threshold for an acceptable time difference to prevent non-stop syncing
var jumpThreshold=2; // seconds, threshold for a time difference that should be corrected by a rough jump
var jumpDeadTime=500; // milliseconds, a dead time in which we don't sync after a jump

// timeouts and intervals
var timeSyncInterval;
var syncActionTimeout=undefined;

// The YouTube API calls this once it's ready
function onYouTubeIframeAPIReady() {
  player1 = new YT.Player('somediv1', {
    videoId: 'zkv-_LqTeQA',
    events: {
      onReady: syncTime,
      onStateChange: syncStateChange
    }
  });
  player2 = new YT.Player('somediv2', {
    videoId: 'zkv-_LqTeQA'
  });
}

// the syncing magic
function syncTime(){
  // making sure the syncing interval has not been set already for some reason
  clearInterval(timeSyncInterval);
  // setting a 1s interval in which we check it the players are in sync and correct in necessary
  timeSyncInterval = setInterval(function () {
    // if the timeout is already set, we are already trying to sync the players, so we don't have to do it again
    if(syncActionTimeout==undefined){
      // measure the time difference and calculate the duration of the sync-action
      var time1=player1.getCurrentTime();
      var time2=player2.getCurrentTime();
      var timeDifference=time2-time1;
      var timeDifferenceAmount=Math.abs(timeDifference);
      var syncActionDuration=1000*timeDifferenceAmount/2;

      if(timeDifferenceAmount>jumpThreshold){
        // the players are too far apart, we have to jump
        console.log("Players are "+timeDifferenceAmount+" apart, Jumping.");
        player2.seekTo(player1.getCurrentTime());
        // we give the player a short moment to start the playback after the jump
        syncActionTimeout=setTimeout(function () {
          syncActionTimeout=undefined;
        },jumpDeadTime);
      }else if(timeDifference>syncThreshold){
        // player 2 is a bit ahead of player 1, slowing player 2 down
        console.log("Player 2 is "+timeDifference+"s ahead of player 1. Syncing.");
        player2.setPlaybackRate(0.5);
        // setting a timeout that fires precisely when both players are sync
        syncActionTimeout=setTimeout(function () {
          // the players should be sync now, so we can go back to normal speed
          player2.setPlaybackRate(1);
          syncActionTimeout=undefined;
        },syncActionDuration);
      }else if(timeDifference<-syncThreshold){
        console.log("Player 1 is "+(-timeDifference)+"s ahead of player 2. Syncing.");
        // player 1 is bit ahead of player 2, slowing player 2 down
        player2.setPlaybackRate(2);
        // setting a timeout that fires precisely when both players are sync
        syncActionTimeout=setTimeout(function () {
          // the players should be sync now, so we can go back to normal speed
          player2.setPlaybackRate(1);
          // undefining the timeout to indicate that we're done syncing
          syncActionTimeout=undefined;
        },syncActionDuration);
      }
    }
  },1000);
}

// a little helper to deal with the user
function syncStateChange(e){
  if(e.data==YT.PlayerState.PLAYING){
    player2.seekTo(player1.getCurrentTime());
    player2.playVideo();
  }else if(e.data==YT.PlayerState.PAUSED){
    player2.seekTo(player1.getCurrentTime());
    player2.pauseVideo();
  }
}

<!DOCTYPE html>
<html>
<head>
        <title>Sync Two Youtube Videos</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- CDN -->
        <script type="text/javascript" src="//www.google.com/jsapi"></script>
        <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onJSClientLoad"></script>

    <script src="https://www.youtube.com/iframe_api"></script>
    <!-- HOSTED -->
        <script src="script.js"></script>
</head>
<body>
  <div id="somediv1"></div>
  <div id="somediv2"></div>
</body>
</html>