Html5同步6个视频

Question

我正在尝试建立一个仅显示一个视频的页面，当我们按下一个按钮时，视频将切换为另一个，但是所有这些都需要保持同步，因为video1具有音频，而其他的则需要同步才能有意义。

这就是我得到的，我真的是一个菜鸟，因此对巨型代码感到抱歉：

<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

我已经破解了一个工作中的小提琴原型。 绝对不是最有效的方法，但是它可以工作。 http://jsfiddle.net/3BmDx/

基本上，它的工作方式是JavaScript将处理点击并播放所有视频，而不是使用“自动播放”标签。 您可能希望在为视频运行.play()之前先对其进行预加载。 像：

    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很方便，因为如果您想一次将.hide()应用于页面上的所有视频元素，则只需使用$('video').hide() ，jQuery就会匹配所有视频标签。

我在reset(b)函数中利用了这一点。 每次按下按钮时都会调用reset(b)函数，它将重新启用所有按钮，停用当前按钮（有助于您选择哪个按钮），然后隐藏页面上的所有视频。 之后，将显示正确的视频。

   $(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

您可以使用我使用的同步代码。 必不可少的部分是

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

尽管此方法在某些情况下可行，但仍存在一些问题。 浏览器在关键帧上进行同步，您必须确保这些关键帧在视频中。 同样，较低的帧速率（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