<div id="player1"></div>    <!-- Background video player -->
    <div id="player2"></div>    <!-- Foreground video player -->

    <script>

此代码异步加载 IFrame Player API 代码。

        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

此函数会在 API 代码下载后创建 <iframe>(和 YouTube 播放器)。注意回调函数:onPlayer1Ready 和 onPlayer1StateChange

        var player1;
        var player2;
        function onYouTubeIframeAPIReady() {
            player1 = new YT.Player('player1', {
                                  height: '780',
                                  width: '1280',
                                  videoId: 'M7lc1UVf-VE',
                                  playerVars: { 'autoplay': 0, 'controls': 0 },
                                  events: {
                                        'onReady': onPlayer1Ready,
                                        'onStateChange': onPlayer1StateChange
                                  }
                             });
            player2 = new YT.Player('player2', {
                                  height: '390',
                                  width: '640',
                                  videoId: 'M7lc1UVf-VE',
                                  events: {
                                       'onReady': onPlayer2Ready,
                                       'onStateChange': onPlayer2StateChange
                                  }
                              });
        }


        var player1Ready = false;
        var player2Ready = false;

现在是代码中有趣的部分了。同步项目中的主要问题与视频在启动前需要缓冲这一事实有关。实际上，API 不提供任何类型的直观功能来预加载视频(由于带宽问题(客户端和服务器端)。所以我们必须有点技巧。
预加载视频的步骤如下:

• 隐藏播放器，以便用户看不到后续步骤)；
• 使播放器静音(player.mute():Void)；
• 模拟时间线中的跳跃以开始缓冲(player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void)；
• 等待等于 YT.PlayerState.PLAYING 的状态更改事件；
• 暂停视频 ( player.pauseVideo():Void );
• 使用 player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void 倒回视频；
• 取消播放器静音 ( player.unMute():Void );
• 显示播放器。

您必须预加载您的两个视频。

        var preloading1 = false;
        var preloading2 = false;

当视频播放器准备就绪时，API 将调用这些函数。

        function onPlayer1Ready(event) 
        {
            player1Ready = true;
            preloading1 = true;       // Flag the player 1 preloading
            player1.mute();           // Mute the player 1
            $( "#player1" ).hide();   // Hide it
            player1.seekTo(1);        // Start the preloading and wait a state change event
        }

        function onPlayer2Ready(event) {
            player2Ready = true;      // The foreground video player is not preloaded here
        }

当背景视频播放器的状态发生变化时，API 会调用此函数。

        function onPlayer1StateChange(event) 
        {
            if (event.data == YT.PlayerState.PLAYING ) {
                if(preloading1)
                {
                    prompt("Background ready");     // For testing
                    player1.pauseVideo();           // Pause the video
                    player1.seekTo(0);              // Rewind
                    player1.unMute();           // Comment this after test
                    $( "#player1" ).show();         // Show the player
                    preloading1 = false;

                    player2Ready = true;
                    preloading2 = true;             // Flag for foreground video preloading
                    player2.mute();
                    //$( "#player2" ).hide();
                    player2.seekTo(1);              // Start buffering and wait the event
                }
                else
                    player2.playVideo();            // If not preloading link the 2 players PLAY events
            }

            else if (event.data == YT.PlayerState.PAUSED ) {
                if(!preloading1)
                    player2.pauseVideo();           // If not preloading link the 2 players PAUSE events
            }
            else if (event.data == YT.PlayerState.BUFFERING ) {
                if(!preloading1)
                {
                    player2.pauseVideo();           // If not preloading link the 2 players BUFFERING events
                }
            }
            else if (event.data == YT.PlayerState.CUED ) {
                if(!preloading1)
                    player2.pauseVideo();           // If not preloading link the 2 players CUEING events
            }
            else if (event.data == YT.PlayerState.ENDED ) {
                player2.stopVideo();                // If not preloading link the 2 players ENDING events
            }
        }

当前台视频播放器的状态发生变化时，API 会调用此函数。

        function onPlayer2StateChange(event) {
            if (event.data == YT.PlayerState.PLAYING ) {
                if(preloading2)
                {
                    //prompt("Foreground ready");
                    player2.pauseVideo();           // Pause the video
                    player2.seekTo(0);              // Rewind
                    player2.unMute();               // Unmute
                    preloading2 = false;

                    $( "#player2" ).show(50, function() {

这是代码中行为异常的部分。取消注释下面的行会使同步变得很糟糕，但是如果你注释它，你将不得不在 PLAY 按钮上单击两次但是同步看起来会更好。

                       //player2.playVideo();
                    });
                }
                else
                    player1.playVideo();
            }
            else if (event.data == YT.PlayerState.PAUSED ) {
                if(/*!preloading1 &&*/ !preloading2)
                    player1.pauseVideo();
            }
            else if (event.data == YT.PlayerState.BUFFERING ) {
                if(!preloading2)
                {
                    player1.pauseVideo();
                    //player1.seekTo(... // Correct the offset here
                }
            }
            else if (event.data == YT.PlayerState.CUED ) {
                if(!preloading2)
                    player1.pauseVideo();
            }
            else if (event.data == YT.PlayerState.ENDED ) {
                player1.stopVideo();
            }
        }


        </script>
    </body>
</html>

请注意，使用此代码可能不会计算观看次数。

如果你想要没有解释的代码，你可以去这里:http://jsfiddle.net/QtBlueWaffle/r8gvX/1/

2016 年更新 Live Preview

希望这对您有所帮助。

关于javascript - 保持两个 YouTube 视频彼此同步，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19896430/