Html5同步6个视频

Question

I'm trying to build a page that displays only one video and when we press a button the video is changed to another, but thay all need to stay in sync, because video1 has audio and the other ones needs to be synced to make sense. 我正在尝试建立一个仅显示一个视频的页面，当我们按下一个按钮时，视频将切换为另一个，但是所有这些都需要保持同步，因为video1具有音频，而其他的则需要同步才能有意义。

Here's what I got, i'm really a noob so sorry for the giant code: 这就是我得到的，我真的是一个菜鸟，因此对巨型代码感到抱歉：

<html>
<head>
<meta charset="utf-8">
<title></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
$(document).ready(function(){
    $(".video2").hide();
    $(".video3").hide();
    $(".video4").hide();
    $(".video5").hide();
    $(".video6").hide();

    var vid1 = document.getElementById("video1");
    var vid2 = document.getElementById("video2");
    var vid3 = document.getElementById("video3");
    var vid4 = document.getElementById("video4");
    var vid5 = document.getElementById("video5");
    var vid6 = document.getElementById("video6");


    if(
    $(".button1").click(function(){
        $(".video1").show();
        $(".video2").hide();
        $(".video3").hide();
        $(".video4").hide();
        $(".video5").hide();
        $(".video6").hide();    
    }
    ));

    if(
    $(".button2").click(function(){
        $(".video1").hide();
        $(".video2").show();
        $(".video3").hide();
        $(".video4").hide();
        $(".video5").hide();
        $(".video6").hide();    
    }
    ));

    if(
    $(".button3").click(function(){
        $(".video1").hide();
        $(".video2").hide();
        $(".video3").show();
        $(".video4").hide();
        $(".video5").hide();
        $(".video6").hide();    
    }
    ));

    if(
    $(".button4").click(function(){
        $(".video1").hide();
        $(".video2").hide();
        $(".video3").hide();
        $(".video4").show();
        $(".video5").hide();
        $(".video6").hide();    
    }
    ));

    if(
    $(".button5").click(function(){
        $(".video1").hide();
        $(".video2").hide();
        $(".video3").hide();
        $(".video4").hide();
        $(".video5").show();
        $(".video6").hide();    
    }
    ));

    if(
    $(".button6").click(function(){
        $(".video1").hide();
        $(".video2").hide();
        $(".video3").hide();
        $(".video4").hide();
        $(".video5").hide();
        $(".video6").show();    
    }
    ));

});
</script>

</head>

<body>

<div class="video1">
    <video id="video1" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely1.mp4" type="video/mp4">
    </video>
</div>

<div class="video2">
    <video id="video2" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely2.mp4" type="video/mp4">
    </video>
</div>

<div class="video3">
    <video id="video3" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely3.mp4" type="video/mp4">
    </video>
</div>

<div class="video4">
    <video id="video4" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely4.mp4" type="video/mp4">
    </video>
</div>

<div class="video5">
    <video id="video5" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely5.mp4" type="video/mp4">
    </video>
</div>

<div class="video6">
    <video id="video6" width="720" height="400" controls preload="auto" autoplay>
      <source src="videos/arely6.mp4" type="video/mp4">
    </video>
</div>

</div>
<div class="button1">
<button>Camera 1</button>
</div>
<div class="button2">
<button>Camera 2</button>
</div>

<div class="button3">
<button>Camera 3</button>
</div>

<div class="button4">
<button>Camera 4</button>
</div>

<div class="button5">
<button>Camera 5</button>
</div>

<div class="button6">
<button>Camera 6</button>
</div>

</div>

</body>
</html>

Answer 1

I've hacked together a working fiddle prototype; 我已经破解了一个工作中的小提琴原型。 definitely not the most efficient it could be, but it works. 绝对不是最有效的方法，但是它可以工作。 http://jsfiddle.net/3BmDx/ http://jsfiddle.net/3BmDx/

Basically, the way that it works is that the javascript will handle the clicks and will play all of the videos instead of using the 'autoplay' tag. 基本上，它的工作方式是JavaScript将处理点击并播放所有视频，而不是使用“自动播放”标签。 You may want to look into pre-loading the videos before running that .play() for them. 您可能希望在为视频运行.play()之前先对其进行预加载。 Something like : 像：

    var videos = 6;
    var loaded = 0;
    $(video).on("load", function() {
        loaded++;
        if(loaded==videos) {
            // all videos have been loaded on the page, now .play() them
        }
    }

jQuery is handy because if you want to apply a .hide() to all of the video elements on the page at once, you can simply use $('video').hide() and jQuery will match all video tags. jQuery很方便，因为如果您想一次将.hide()应用于页面上的所有视频元素，则只需使用$('video').hide() ，jQuery就会匹配所有视频标签。

I use this to my advantage in the reset(b) function. 我在reset(b)函数中利用了这一点。 the reset(b) function is called each time a button click is pressed and it will re-enable all buttons, deactivate the current button (helpful for knowing which you selected) and then hide all the videos on the page. 每次按下按钮时都会调用reset(b)函数，它将重新启用所有按钮，停用当前按钮（有助于您选择哪个按钮），然后隐藏页面上的所有视频。 Afterward the correct video will be shown. 之后，将显示正确的视频。

   $(document).ready(function(){
        // hide all of the video tags
        $("video").hide();
        $("button").removeAttr("disabled");

        $.each($("video"), function(i,e) {
            $(e)[0].play();
        });

        function reset(b) {     
            $("button").removeAttr("disabled");
            $(b).attr("disabled", "disabled");
            $("video").hide();   
        }

        // handle button click for video to show
        $("#button1").click(function() {  
            reset($(this));
            $("#video1").show();
        });  
        $("#button2").click(function() {     
            reset($(this));
            $("#video2").show();
        });  
        $("#button3").click(function() {  
            reset($(this));
            $("#video3").show();
        });  
        $("#button4").click(function() {  
            reset($(this));
            $("#video4").show();
        });  
        $("#button5").click(function() {  
            reset($(this));
            $("#video5").show();
        });  
        $("#button6").click(function() { 
            reset($(this));
            $("#video6").show();
        });    
    });

Answer 2

You can use the synchronisation code I used. 您可以使用我使用的同步代码。 The essential part is 必不可少的部分是

if (Math.abs(other.currentTime - first.currentTime) > maxDrift) {
      // sync all times of videos to first
      other.currentTime = first.currentTime;
}

Although this approach works for some cases there are some issues. 尽管此方法在某些情况下可行，但仍存在一些问题。 Browsers synchronise on keyframes, which you have to make sure are in the video. 浏览器在关键帧上进行同步，您必须确保这些关键帧在视频中。 Also lower frame rates (fps<10) tend to be very buggy. 同样，较低的帧速率（fps <10）也很容易出错。

Html5同步6个视频

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-12-17 21:57:38

解决方案2
0 2017-02-08 21:13:26

Html5同步6个视频

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-12-17 21:57:38

解决方案2 0 2017-02-08 21:13:26

解决方案1
0 已采纳 2013-12-17 21:57:38

解决方案2
0 2017-02-08 21:13:26