视差视频进度滚动

Question

我想要创建一个视频视差背景，但我希望视频的进度与我在网页上的位置相对应。

例如：

• 当我位于页面顶部时，视频时长为 0 秒，
• 中间为总运行时间的 50%
• ，只有当我到达页面底部时才结束。

Answer 1

你必须将大问题分解为小问题。

首先，你需要获取视频的时长：

var vid = document.getElementById("myVideo");
duration = vid.duration;

接下来，您需要获取以百分比表示的滚动量

function getVerticalScrollPercentage (elm) {
  var p = elm.parentNode
  return (elm.scrollTop || p.scrollTop) / (p.scrollHeight - p.clientHeight ) * 100
}

接下来，您需要 动态设置视频的 currentTime （以秒为单位），您可以这样做：

vid.currentTime = duration * percentage / 100;

最后，您需要每当滚动量发生变化时，再次设置 currentTime。这是通过在 body 上使用事件侦听器来实现的。

object.addEventListener("scroll", myScript);

现在把它们放在一起:)