6 Videos in sync Html5
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.
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>
2 answers
solution1
0 ACCPTED 2013-12-17 21:57:38
I've hacked together a working fiddle prototype; definitely not the most efficient it could be, but it works. 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. You may want to look into pre-loading the videos before running that .play() for them. 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.
I use this to my advantage in the reset(b) function. 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. 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();
});
});
solution2
0 2017-02-08 21:13:26
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.