javascript - 鼠标位置的背景视频比较

Question

我正在尝试为我正在构建的网站制作视频比较标题。我有两个视频叠加在一起，我正在尝试创建一个比较 slider 效果，其中顶层显示鼠标位置的底部。

下面的 fiddle /代码，任何帮助将不胜感激。

JSFiddle

HTML:

<video class="one" 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>
    <video class="two" 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>

CSS:

video {
  position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

Answer 1

我创建了一个 bin .这与您描述的不完全相同不确定您是否可以接受？

这个想法与您的 codepen 示例没有太大区别。第二个视频将被剪辑器元素剪辑。

<div class="box" id="box">
  <video>...</video>      
  <div class="clipper" id="clipper">
    <video>...</video>
  </div>
</div>

将裁剪器设置为绝对位置。

.clipper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

在 mousemove 事件中更改底部位置。

<script>
  box.addEventListener('mousemove', function (event) {
    var top = box.offsetTop
    var height = box.offsetHeight
    var y = event.pageY
    clipper.style.bottom = Math.max(top + height - y, 0) + 'px'
  })
</script>

希望这对您有所帮助。