如何用JavaScript在客户端实时实现双视频画中画（PIP）叠加？

当然可以用JavaScript在客户端实现实时画中画效果，下面分几种方案给你参考：

1. 基础CSS叠加方案（最简易） #

你提到的用两个<video>标签加CSS定位的方案其实是最轻量化的选择，完全不需要额外JS逻辑，适合只需要静态画中画的场景。

示例代码：

<div style="position: relative; width: 800px; height: 450px;">
  <!-- 背景视频 -->
  <video 
    src="background-video.mp4" 
    style="width: 100%; height: 100%; object-fit: cover;"
    controls autoplay muted
  ></video>
  <!-- 画中画视频 -->
  <video 
    src="pip-video.mp4" 
    style="position: absolute; bottom: 20px; right: 20px; width: 200px; height: auto; border: 2px solid white;"
    controls autoplay muted
  ></video>
</div>

这个方案的优势是零额外依赖、性能开销极低，浏览器兼容性拉满，唯一局限是没法对视频帧做自定义处理（比如实时滤镜、帧合并导出）。

2. Canvas实时合成方案（更灵活） #

如果需要更灵活的控制（比如实时调整视频大小/位置、添加滤镜、导出合成后的视频），可以用<canvas>来实时绘制两个视频的帧。

示例代码：

<canvas id="videoCanvas" width="800" height="450"></canvas>
<video id="bgVideo" src="background-video.mp4" autoplay muted style="display: none;"></video>
<video id="pipVideo" src="pip-video.mp4" autoplay muted style="display: none;"></video>

<script>
  const canvas = document.getElementById('videoCanvas');
  const ctx = canvas.getContext('2d');
  const bgVideo = document.getElementById('bgVideo');
  const pipVideo = document.getElementById('pipVideo');

  function drawFrame() {
    // 绘制背景视频
    ctx.drawImage(bgVideo, 0, 0, canvas.width, canvas.height);
    // 绘制画中画视频（右下角，200px宽）
    const pipWidth = 200;
    const pipHeight = pipWidth * (pipVideo.videoHeight / pipVideo.videoWidth);
    ctx.drawImage(pipVideo, canvas.width - pipWidth - 20, canvas.height - pipHeight - 20, pipWidth, pipHeight);
    requestAnimationFrame(drawFrame);
  }

  // 等视频加载完成后开始绘制
  Promise.all([
    new Promise(resolve => bgVideo.onloadeddata = resolve),
    new Promise(resolve => pipVideo.onloadeddata = resolve)
  ]).then(drawFrame);
</script>

这个方案可以实现各种自定义效果，还能结合MediaRecorder API把合成后的Canvas内容录制成视频文件，适合需要动态交互或导出的场景。

推荐工具/库 #

• Video.js：成熟的HTML5视频播放器库，支持通过自定义插件或布局配置快速实现画中画，还自带很多播放器增强功能（比如字幕、播放控制），适合需要完善播放器体验的场景。
• FFmpeg.wasm：如果需要在客户端做更复杂的视频处理（比如编码格式转换、剪辑拼接），可以用这个把FFmpeg编译成WebAssembly在浏览器运行，虽然体积较大，但能实现接近桌面端FFmpeg的功能。
• 原生MediaRecorder API：配合Canvas使用，可以直接录制合成后的视频流，不需要额外库，适合需要导出视频的场景。

• 只需要简单静态画中画：选CSS叠加方案，成本最低。
• 需要动态调整或自定义效果：选Canvas合成方案。
• 需要高级视频处理（比如编码、剪辑）：选FFmpeg.wasm。

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