I'm looking to create a full height/width viewport video comparison slider inspired by this article:
I'm trying to make the video take the full height and width of the viewport, but I've been unsuccessful so far, and I'm unsure how to achieve the effect. Any help would be much appreciated, link to JSFiddle example and code below:
HTML:
<div id="video-compare-container">
<video loop autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dirty.jpg">
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.mp4>
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.webm>
</video>
<div id="video-clipper">
<video loop autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/clean.jpg">
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.mp4>
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.webm>
</video>
</div>
</div>
CSS
body {
background: #333;
margin:0;
}
#video-compare-container {
display: inline-block;
line-height: 0;
position: relative;
width: 100%;
padding-top: 42.3%;
}
#video-compare-container > video {
width: 100%;
position: absolute;
top: 0; height: 100%;
}
#video-clipper {
width: 50%; position: absolute;
top: 0; bottom: 0;
overflow: hidden;
}
#video-clipper video {
width: 200%;
postion: absolute;
height: 100%;
}
Javascript:
function trackLocation(e) {
var rect = videoContainer.getBoundingClientRect(),
position = ((e.pageX - rect.left) / videoContainer.offsetWidth)*100;
if (position <= 100) {
videoClipper.style.width = position+"%";
clippedVideo.style.width = ((100/position)*100)+"%";
clippedVideo.style.zIndex = 3;
}
}
var videoContainer = document.getElementById("video-compare-container"),
videoClipper = document.getElementById("video-clipper"),
clippedVideo = videoClipper.getElementsByTagName("video")[0];
videoContainer.addEventListener( "mousemove", trackLocation, false);
videoContainer.addEventListener("touchstart",trackLocation,false);
videoContainer.addEventListener("touchmove",trackLocation,false);
I'd use canplaythrough
events on both videos, to check if they are ready:
video1.addEventListener("canplaythrough", function() {
// video1 ready to be played
}, false);
This event is fired when browser estimates that i has enough data to continuesly play streaming.
Only then i'd play both the videos simultaneousely:
video1.play()
video2.play()
PS. I assumed that you've got problem with synchronising the footage
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.