Hi Everyone,
I have two video with same duration (both videos duration is 10 min). One video has no voice over and other video has voice. My requirement is both video will sync properly by javascirpt or jquery. one play/pause button will be both two video, when i drag player bar both videos duration point will change same time and play from same duration.
One big issue is, these two video are uploading in server or vimeo server. When I click play button, suppose one video is already downloading it will be play but if other video will not download or buffering the first video should not be play. It should wait for 2nd video same time frame, after buffering it will be check, if two video time frame is same then it will be play both two video.
Can any one help me. I am working on same type of project but till am not find any solution. Please help me.
also I have found some code from github, but below code is not working:
<style>
video {
float: left;
width: 40%;
}
#controls {
clear: left;
}
</style>
<title>Two videos in sync</title>
<article>
<video preload="auto" id="one">
<source src="assets/dizzy.mp4" />
<source src="assets/dizzy.ogv" />
</video>
<video preload="auto" id="two">
<source src="assets/dizzy.mp4" />
<source src="assets/dizzy.ogv" />
</video>
<p id="controls">
<input type="button" id="play" value="play">
<span id="position">00:00</span> / <span id="duration">loading...</span>
<input type="range" value="0" id="scrub" />
</p>
<p>This demo shows two videos running, which we're trying to run in sync. Moving the scrubber should scrub <em>both</em> videos.</p>
</article>
<script>
var video = document.querySelector('#one'),
video2 = document.querySelector('#two'),
togglePlay = document.querySelector('#play'),
position = document.querySelector('#position'),
ready = false,
controls = document.querySelector('#controls'),
scrub = document.querySelector('#scrub');
addEvent(togglePlay, 'click', function () {
if (ready) {
if (video.paused) {
if (video.ended) {
video.currentTime = 0;
video2.currentTime = 0;
}
video2.currentTime = video.currentTime;
video.play();
this.value = "pause";
} else {
video.pause();
this.value = "play";
}
}
});
function seek() {
scrub.value = video2.currentTime = this.currentTime;
}
addEvent(video, 'seeking', seek);
addEvent(video, 'seeked', seek);
addEvent(video, 'play', function () {
video2.play();
});
addEvent(video, 'pause', function () {
video2.pause();
})
addEvent(video, 'timeupdate', function () {
position.innerHTML = asTime(this.currentTime);
scrub.value = this.currentTime;
});
addEvent(video, 'ended', function () {
togglePlay.value = "play";
});
addEvent(video, 'canplay', function () {
video.muted = true;
ready = true;
document.querySelector('#duration').innerHTML = asTime(this.duration);
scrub.setAttribute('max', this.duration);
addEvent(scrub, 'change', function () {
video.currentTime = this.value;
video2.currentTime = this.value;
});
});
function asTime(t) {
t = Math.round(t);
var s = t % 60;
var m = Math.round(t / 60);
return two(m) + ':' + two(s);
}
function two(s) {
s += "";
if (s.length < 2) s = "0" + s;
return s;
}
</script>
Thanks & Reagrds,
Susanta
1
Reply
AdChoices