如何同步同源双视频播放并避免重复下载？

问题背景 #

在应用首页部署了两个自动播放、无控制栏的MP4视频（共用90MB的同源视频源）：

• 背景视频：添加模糊效果，仅用于视觉增强
• 前景视频：叠加在背景之上，是用户核心观看内容

当前存在两个问题：

1. 浏览器重复下载同一视频源，浪费带宽
2. 两个视频播放不同步，缓冲或暂停时画面不一致

目标是实现类似LOL官网的双视频视觉效果，解决上述问题。

核心解决方案 #

1. 单视频源 + 双Canvas渲染（最优方案） #

浏览器重复下载的本质是两个<video>元素各自发起独立请求，哪怕同源也可能因缓存策略差异重复拉取。只加载一个视频实例，通过Canvas渲染两个视觉层是最可靠的解决方式，既能彻底避免重复下载，又能保证画面完全同步。

代码实现（React）：

import { useEffect, useRef } from 'react';

const DualVideoCanvas = ({ VIDEO_SRC }) => {
  const videoRef = useRef(null);
  const bgCanvasRef = useRef(null);
  const fgCanvasRef = useRef(null);
  const animationId = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    const bgCanvas = bgCanvasRef.current;
    const fgCanvas = fgCanvasRef.current;
    const bgCtx = bgCanvas.getContext('2d');
    const fgCtx = fgCanvas.getContext('2d');

    // 同步Canvas尺寸与窗口
    const resize = () => {
      bgCanvas.width = window.innerWidth;
      bgCanvas.height = window.innerHeight;
      fgCanvas.width = window.innerWidth;
      fgCanvas.height = window.innerHeight;
    };
    resize();
    window.addEventListener('resize', resize);

    // 逐帧渲染视频到两个Canvas
    const renderFrames = () => {
      if (video.readyState >= 2) {
        // 渲染模糊背景
        bgCtx.clearRect(0, 0, bgCanvas.width, bgCanvas.height);
        bgCtx.drawImage(video, 0, 0, bgCanvas.width, bgCanvas.height);
        bgCtx.filter = 'blur(8px)'; // 可调整模糊程度
        
        // 渲染清晰前景
        fgCtx.clearRect(0, 0, fgCanvas.width, fgCanvas.height);
        fgCtx.drawImage(video, 0, 0, fgCanvas.width, fgCanvas.height);
      }
      animationId.current = requestAnimationFrame(renderFrames);
    };

    // 视频加载完成后启动渲染
    video.addEventListener('loadeddata', renderFrames);
    video.load();

    return () => {
      window.removeEventListener('resize', resize);
      cancelAnimationFrame(animationId.current);
      video.removeEventListener('loadeddata', renderFrames);
    };
  }, [VIDEO_SRC]);

  return (
    <div className="relative w-full h-full">
      {/* 隐藏的数据源视频，不直接显示 */}
      <video
        ref={videoRef}
        loop
        muted
        preload="auto"
        poster="/MainVideoPoster.jpg"
        style={{ display: 'none' }}
      >
        <source src={VIDEO_SRC} type="video/mp4" />
      </video>
      {/* 模糊背景Canvas */}
      <canvas
        ref={bgCanvasRef}
        className="absolute inset-0 w-full h-full object-cover"
      />
      {/* 清晰前景Canvas */}
      <canvas
        ref={fgCanvasRef}
        className="absolute inset-0 w-full h-full object-contain screen-md:object-contain"
      />
    </div>
  );
};

export default DualVideoCanvas;

这个方案的优势：

• 仅发起一次视频请求，完全杜绝重复下载
• 两个视觉层共用同一帧数据，播放状态100%同步
• 支持自定义渲染效果，比如调整模糊度、添加滤镜等

2. 缓存优化 + 事件同步（低成本兼容方案） #

如果不想重构为Canvas，可通过强化缓存和事件监听来缓解问题：

• 将preload设为'auto'，引导浏览器优先缓存视频
• 监听主视频的播放、暂停、时间更新等事件，实时同步背景视频的状态

代码实现（React）：

import { useEffect, useRef } from 'react';

const SyncDualVideos = ({ VIDEO_SRC }) => {
  const mainVideoRef = useRef(null);
  const bgVideoRef = useRef(null);

  useEffect(() => {
    const mainVideo = mainVideoRef.current;
    const bgVideo = bgVideoRef.current;

    const syncPlayback = () => {
      // 同步播放/暂停状态
      if (mainVideo.paused !== bgVideo.paused) {
        bgVideo[mainVideo.paused ? 'pause' : 'play']();
      }
      // 同步播放进度，误差超过0.1秒时修正
      if (Math.abs(mainVideo.currentTime - bgVideo.currentTime) > 0.1) {
        bgVideo.currentTime = mainVideo.currentTime;
      }
    };

    // 绑定主视频的关键事件
    mainVideo.addEventListener('timeupdate', syncPlayback);
    mainVideo.addEventListener('play', syncPlayback);
    mainVideo.addEventListener('pause', syncPlayback);
    mainVideo.addEventListener('seeked', syncPlayback);

    return () => {
      // 清理事件监听
      mainVideo.removeEventListener('timeupdate', syncPlayback);
      mainVideo.removeEventListener('play', syncPlayback);
      mainVideo.removeEventListener('pause', syncPlayback);
      mainVideo.removeEventListener('seeked', syncPlayback);
    };
  }, [VIDEO_SRC]);

  return (
    <div className="relative w-full h-full">
      {/* 背景模糊视频 */}
      <video
        ref={bgVideoRef}
        loop
        muted
        autoPlay
        preload="auto"
        poster="/MainVideoPoster.jpg"
        className="w-full h-full object-cover object-center blur-sm"
      >
        <source src={VIDEO_SRC} type="video/mp4" />
      </video>
      {/* 前景主视频 */}
      <video
        ref={mainVideoRef}
        loop
        muted
        autoPlay
        preload="auto"
        poster="/MainVideoPoster.jpg"
        className="absolute inset-0 w-full h-full object-contain object-center screen-md:object-contain"
      >
        <source src={VIDEO_SRC} type="video/mp4" />
      </video>
    </div>
  );
};

export default SyncDualVideos;

注意：这个方案依赖浏览器缓存策略，极端场景下仍可能重复下载，同步精度也不如Canvas方案，但改造成本极低，适合快速修复现有问题。

额外优化建议 #

• 压缩视频：90MB的视频体积过大，建议转码为H.265编码，或生成多分辨率适配版本，大幅降低加载压力
• 配置HTTP缓存：在服务器端为视频文件设置强缓存（如Cache-Control: public, max-age=31536000），确保后续请求直接读取本地缓存
• 使用WebM格式：WebM比MP4体积更小，主流浏览器兼容性良好，可作为备选源提升加载速度

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