使视频比较滑块全宽/高

Question

我正在寻找一个受本文启发的全高/宽视口视频比较滑块：

文章

我正在尝试使视频占据视口的整个高度和宽度，但是到目前为止，我一直没有成功，而且我不确定如何实现这种效果。 任何帮助将不胜感激，请链接到JSFiddle示例和下面的代码：

JS小提琴

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);

Answer 1

我会在两个视频上都使用canplaythrough事件，以检查它们是否准备就绪：

video1.addEventListener("canplaythrough", function() {
    // video1 ready to be played
}, false);

当浏览器估计我有足够的数据来继续播放流时，将引发此事件。

只有这样我才能同时播放两个视频：

video1.play()
video2.play()

---

PS。 我认为您在同步镜头方面遇到问题