Question

我正在尝试在html5中同步播放两个视频。这是我的方法。

<html>
   <head>
       <script>
           window.onload = function(){
               var v1 = document.getElementById('v1');
               v1.addEventListener("play", function() {
               document.getElementById('v2').play();
           });

           v1.addEventListener("pause", function() {
               document.getElementById('v2').pause();
           });

           v1.addEventListener("seeking", function() {
               document.getElementById('v2').currentTime = v1.currentTime;
           });

           v1.addEventListener("seeked", function() {
                document.getElementById('v2').currentTime = v1.currentTime;
           });
       </script>
   </head>
   <body>
       <video id="v1" controls=""> 
           <source src="big-buck-bunny_trailer.webm" type="video/webm">
       </video>
       <video id="v2" controls=""> 
           <source src="big-buck-bunny_trailer.webm" type="video/webm">
       </video>
   </body>
</html>

在上面的代码中，有2个视频元素（v1和v2）。主视频（v1）控制（开始/停止/重新定位）第二视频（v2）。当由first（v1）控制时，两个视频将保持同步。但是，如果我在第二个（v2）视频（类似于v1）中添加了“寻求”和“寻求”事件监听器，则每个监听器都声明调用另一个监听器，整个页面都将挂起。

这里是工作中的jsFiddle。视频big-buck-bunny_trailer.webm可以在this链接中找到。

如何补救？

在html5中同步两个视频

0 个答案: