6視頻同步Html5

我試圖建立一個只顯示一個視頻的頁面，當我們按下按鈕時，視頻更改爲另一個，但是都需要保持同步，因爲video1有音頻，另一個需要同步纔有意義。6視頻同步Html5

這裏是我，我是一個真正的小白這樣的巨型代碼遺憾：

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

來源

2013-12-17 Fealaure

你有什麼問題？ – Jasper

什麼使它們同步？在屏幕上播放一個應該一次播放它們？ – fauverism

什麼都不會同步。我需要做一些事情來同步=（ – Fealaure

我砍死在一起工作小提琴原型;絕對不是最有效率的，但它是有效的。 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(); 
     });  
    });

來源

2013-12-17 21:57:38

您可以使用我使用的synchronisation代碼。關鍵部分是

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

儘管這種方法適用於某些情況，但仍有一些問題。瀏覽器在關鍵幀上進行同步，您必須確保它們在視頻中。較低的幀速率（fps < 10）往往很麻煩。

來源

2017-02-08 21:13:26 SiggyF

6視頻同步Html5

回答

相關問題