实现滚动向下播放MP4动画、向上滚动倒放的技术求助

核心逻辑 #

通过监听页面scroll事件，计算滚动进度并映射到视频总时长，动态控制视频的播放位置与方向：向下滚动时正向播放，向上滚动时反向播放，同时避免频繁切换状态导致的卡顿。

具体实现步骤 #

1. HTML结构 #

给视频元素设置唯一ID，方便JS获取，同时添加移动端兼容属性：

<video id="scroll-video" src="your-video.mp4" muted playsinline preload="auto"></video>

注：muted和playsinline用于保证移动端自动播放，preload="auto"可加快视频加载速度

2. CSS样式 #

让视频固定在视口，避免滚动时位移，同时排除交互干扰：

#scroll-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none; /* 防止视频阻断页面滚动交互 */
}

body {
  height: 3000px; /* 提供足够的滚动测试高度 */
}

3. JavaScript实现 #

const video = document.getElementById('scroll-video');
let lastScrollPos = 0;
let isForward = true;

// 等待视频元数据加载完成，获取总时长
video.addEventListener('loadedmetadata', () => {
  const totalDuration = video.duration;
  const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;

  // 滚动事件监听（可加防抖优化性能）
  window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    // 计算滚动进度（0-1）
    const scrollProgress = currentScroll / scrollableHeight;
    // 映射到视频对应播放时间
    const targetTime = scrollProgress * totalDuration;

    // 判断滚动方向，切换播放模式
    if (currentScroll > lastScrollPos) {
      // 向下滚动：正向播放
      if (!isForward) {
        video.playbackRate = 1;
        isForward = true;
      }
    } else {
      // 向上滚动：反向播放
      if (isForward) {
        video.playbackRate = -1;
        isForward = false;
      }
    }

    // 直接设置播放位置，避免速率切换导致的跳帧
    video.currentTime = targetTime;
    lastScrollPos = currentScroll;
  });
});

性能优化与细节处理 #

• 防抖优化：如果滚动时页面卡顿，给滚动事件添加防抖函数减少触发频率：

function debounce(func, delay = 10) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 替换原scroll事件监听：
window.addEventListener('scroll', debounce(() => {
  // 原滚动逻辑代码
}));

• 视频加载兼容：如果视频加载缓慢，可监听canplaythrough事件后再启用滚动控制，确保视频可流畅播放。
• 移动端适配：部分移动端浏览器对反向播放支持有限，可测试后调整播放逻辑，或用进度直接跳转替代速率反转。

内容的提问来源于stack exchange，提问作者Osama Daghestani