如何用HTML和JavaScript实现视频特定序列的最优播放方案？

核心优化：用requestAnimationFrame替代setInterval #

setInterval的时间精度不稳定，和浏览器渲染不同步，是倒放卡顿的主要原因。换成requestAnimationFrame能让视频时间的更新和页面渲染帧对齐，大幅提升平滑度。

具体实现代码（Next.js 适配） #

import { useRef, useEffect } from 'react';

const BackgroundVideo = () => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const animationFrameRef = useRef<number | null>(null);
  const reversePoint = 6; // 倒放停止的时间点
  const normalSpeed = 1; // 正常播放速度
  const reverseSpeed = 0.5; // 倒放减速一半

  const playForwardLoop = () => {
    const video = videoRef.current;
    if (!video) return;

    // 按浏览器帧率计算每帧前进的时间，和渲染同步
    const frameTime = 1 / 60 * normalSpeed;
    video.currentTime += frameTime;

    if (video.currentTime >= video.duration) {
      cancelAnimationFrame(animationFrameRef.current!);
      playBackwardLoop();
    } else {
      animationFrameRef.current = requestAnimationFrame(playForwardLoop);
    }
  };

  const playBackwardLoop = () => {
    const video = videoRef.current;
    if (!video) return;

    const frameTime = 1 / 60 * reverseSpeed;
    video.currentTime -= frameTime;

    if (video.currentTime <= reversePoint) {
      cancelAnimationFrame(animationFrameRef.current!);
      playForwardLoop();
    } else {
      animationFrameRef.current = requestAnimationFrame(playBackwardLoop);
    }
  };

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    // 监听视频自然播放结束事件，触发倒放逻辑
    const handleEnded = () => {
      cancelAnimationFrame(animationFrameRef.current!);
      playBackwardLoop();
    };

    video.addEventListener('ended', handleEnded);
    video.play();

    // 组件卸载时清理资源
    return () => {
      video.removeEventListener('ended', handleEnded);
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }
    };
  }, []);

  return (
    <video
      ref={videoRef}
      src="/your-background-video.mp4"
      muted
      loop={false} // 自定义循环逻辑，禁用原生loop
      preload="auto"
      playsInline
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        objectFit: 'cover',
        zIndex: -1,
      }}
    />
  );
};

export default BackgroundVideo;

额外优化建议 #

• 视频编码优化：把视频关键帧间隔设小（比如每1秒一个关键帧），用FFmpeg可加参数 -g 25（对应25fps视频），减少seek时的加载延迟。
• 预加载设置：保留preload="auto"，确保视频提前缓存足够内容，避免播放时断流。
• 压缩视频体积：用H.264编码压缩视频，平衡画质和大小，降低浏览器解码压力。

过往方案问题分析 #

1. 双视频切换：浏览器加载新视频必然有间隙，哪怕预加载也会存在seek延迟，无法做到真正无缝。
2. GSAP卡顿：GSAP默认动画逻辑未结合视频实际帧率，频繁触发seek操作导致卡顿。
3. setInterval卡顿：执行时间不固定，和渲染帧不同步，导致currentTime更新不连续，出现跳帧。

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