Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

104 lines (91 sloc) 2.426 kb
<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) {
video.playbackRate = 0.5;
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>
Jump to Line
Something went wrong with that request. Please try again.