Video on Scroll Animation滚动触发动画服务器端卡顿严重如何解决

滚动触发视频动画服务器卡顿问题解决方案 #

核心问题原因 #

本地运行流畅但部署到服务器后卡顿，核心是视频加载逻辑和播放控制实现存在缺陷，和视频压缩关联度较低：

• 当前你使用setInterval固定每33.3ms修改video.currentTime，服务器环境下视频为流式加载，没有预加载足够的关键帧时，频繁修改currentTime会反复触发视频缓冲请求，直接导致卡顿
• 1分54秒的视频对应duration配置为113000（刚好匹配视频总时长），当前滚动进度和视频时间的映射逻辑没有做跳帧校验，也没有对currentTime的修改做节流，大量无效修改请求挤占性能
• 调试用的console.log每33.3ms执行一次，线上环境也会产生额外的性能消耗

优化方案 #

1. 视频资源优化

• 导出视频时设置关键帧间隔为1秒甚至更小，保证每次跳转currentTime时不需要长时间缓冲
• 给<video>标签添加preload="auto"、muted、playsinline属性，让浏览器优先加载视频资源，不会因为交互限制延迟加载

<video preload="auto" muted playsinline>
  <source src="你的视频地址" type="video/mp4">
</video>

2. 代码逻辑优化

修改视频控制部分的代码如下：

const intro = document.querySelector(".intro");
const video = intro.querySelector("video");
const text = intro.querySelector("h1");
//END SECTION
const section = document.querySelector("section");
const end = section.querySelector("h1");

//SCROLLMAGIC
const controller = new ScrollMagic.Controller();

//Scenes
let scene = new ScrollMagic.Scene({
  duration: 113000,
  triggerElement: intro,
  triggerHook: 0
})
  .setPin(intro)
  .addTo(controller);

//Text Animation
const textAnim = TweenMax.fromTo(text, 3, { opacity: 1 }, { opacity: 0 });

let scene2 = new ScrollMagic.Scene({
  duration: 0,
  triggerElement: intro,
  triggerHook: 0
})
  .setTween(textAnim)
  .addTo(controller);

//优化后的视频动画逻辑
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;
// 记录上次设置的currentTime，差值过小时不修改，避免频繁触发缓冲
let lastTime = 0;
// 等待视频元数据加载完成后再执行时间控制，避免提前修改currentTime报错
video.addEventListener('loadedmetadata', () => {
  scene.on("update", e => {
    scrollpos = e.scrollPos / 1000;
    // 限制scrollpos不超过视频最大时长，避免非法值报错
    scrollpos = Math.min(scrollpos, video.duration);
  });

  // 用requestAnimationFrame替代setInterval，和浏览器渲染节奏对齐，性能更好
  function updateVideoTime() {
    delay += (scrollpos - delay) * accelamount;
    // 仅当前时间和上次设置的时间差大于0.03秒、且视频已加载到对应帧时才修改时间
    if (Math.abs(delay - lastTime) > 0.03 && video.readyState >= 2) {
      video.currentTime = delay;
      lastTime = delay;
    }
    requestAnimationFrame(updateVideoTime);
  }
  updateVideoTime();
});

3. 服务器配置优化

• 给服务器配置视频文件的范围请求（Range Request）支持，保证浏览器可以分段加载视频的指定时间片段，不需要加载完整视频即可跳转时间点
• 给视频资源配置强缓存规则，降低重复访问时的加载耗时

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