Chrome及其他浏览器视频帧率过低问题求助

问题根源 #

你当前的代码在scroll事件触发时直接修改video.currentTime，而scroll事件每秒能触发几十上百次，浏览器频繁执行视频seek操作，Chrome和Firefox的媒体处理引擎在高频seek下容易出现掉帧；Safari的媒体栈对这类场景优化更好，所以没受影响。另外每次scroll都重复查询DOM、计算页面高度，也会增加不必要的性能开销。

优化方案 #

• 给scroll事件加防抖：减少触发频率，避免高频执行seek操作
• 缓存静态DOM和计算值：页面高度如果不会动态变化，只计算一次；video元素也缓存起来，不用每次都查询DOM
• 增加seek阈值判断：只有当滚动带来的时间变化超过一定阈值时才更新currentTime，避免微小滚动就触发seek
• 用requestAnimationFrame同步更新：让视频时间更新和浏览器渲染帧同步，减少卡顿

修改后的代码 #

// 缓存DOM元素和静态计算值
const video = document.getElementById('video');
let videoLength;
let scrollRange;
let timeoutId;

// 初始化静态值（放在视频加载完成的回调里，确保获取到准确的视频时长）
video.addEventListener('loadedmetadata', function() {
  videoLength = this.duration;
  scrollRange = $(document).height() - $(window).height();
});

function scrollVideo() {
  // 避免未初始化完成就执行
  if (!videoLength || !scrollRange) return;
  
  const scrollPosition = $(document).scrollTop();
  const targetTime = (scrollPosition / scrollRange) * videoLength;
  
  // 只有当目标时间和当前时间差超过0.1秒时才更新，减少不必要的seek
  if (Math.abs(video.currentTime - targetTime) > 0.1) {
    // 用requestAnimationFrame同步到浏览器渲染帧
    requestAnimationFrame(() => {
      video.currentTime = targetTime;
    });
  }
}

$(window).scroll(function() {
  // 防抖：每次滚动时清除之前的定时器，延迟30ms执行
  clearTimeout(timeoutId);
  timeoutId = setTimeout(scrollVideo, 30);
});

额外建议 #

• 检查视频编码：确保H.254视频的关键帧间隔不要太大，比如设置为1秒（24帧），这样浏览器seek时能更快定位到最近的关键帧，减少卡顿
• 全程避免在scroll事件回调里做DOM操作或重排计算，所有需要的静态值都提前缓存好

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