Question

我正在尝试为我正在构建的网站制作视频比较标题。我有两个视频在彼此之上，我正在尝试创建一个比较滑块效果，其中顶层显示鼠标位置的底部。

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

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

我会评论，但我还没有足够的声誉。（对不起）

如果您想要完整显示，则可以添加带有更改事件侦听器的范围滑块，并根据范围滑块的值调整顶层视频的不透明度。

Answer 2

我创建了一个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>

希望得到这个帮助。

鼠标位置的背景视频比较

2 个答案: