保持两个YouTube视频相互同步

我在同一页面上嵌入了两个相同的YouTube视频。我希望它们能够同步播放，以下是我的要求/注意事项：

• 两个视频必须同时开始播放
• 当用户播放/暂停一个视频时，另一个视频也要做出相同的动作
  • 通过API很容易实现
• 当一个视频缓冲时，另一个视频会停止等待，并在两者都准备好时开始播放
• 我只需要一个视频的音频
• 同步精度不必完全精确到毫秒，但要可靠
• 一个视频将用作背景视频
  • 这个视频会稍微模糊（使用CSS3模糊效果），所以质量不是非常重要

我尝试使用YouTube JS API来监听播放器状态的变化，并尝试保持两个视频的同步，但结果并不像我希望的那样可靠。我将在下面发布部分代码。

其中一个注意事项是一个视频将比另一个视频更大，所以YouTube可能会为其提供更高质量的视频。

因为我使用了CSS3模糊效果，所以我只能在最新的Webkit浏览器上使用，因此只在这些浏览器上（而不是在FF / IE上）工作的解决方案不是问题。

我的问题是，对于上述要求，有没有办法保持这两个视频的同步？我曾考虑过是否可能使用canvas API来“重新绘制”视频，但经过研究，我发现这是不可能的。

buffering = false;
var buffer_control = function(buffering_video, sibling_video, state) {
switch ( state ) {
    case 1: // 播放
        if ( buffering === true ) {
            console.error('缓冲后重新开始');
            // 暂停两个视频，确保它们同时播放
            buffering_video.pauseVideo();
            sibling_video.pauseVideo();
            // 获取正在缓冲的视频的当前时间...
            var current_time = buffering_video.getCurrentTime();
            // ...并将兄弟视频回退到该时间
            sibling_video.seekTo(current_time, true);
            // 最后，播放两个视频
            buffering_video.playVideo();
            sibling_video.playVideo();
            // 取消缓冲标志
            buffering = false;
        }
        break;
    case 3: // 缓冲
        console.error('缓冲中');
        // 设置缓冲标志
        buffering = true;
        // 暂停兄弟视频
        sibling_video.pauseVideo();
        break;
}
}