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