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

回答

相关问题