如何实现单页多video标签实例共享已加载缓冲区？避开Canvas方案

方案1：利用video的captureStream()复用媒体流 #

直接通过主视频元素的captureStream()方法生成原生MediaStream，将这个流绑定到其他所有需要同步展示的video标签的srcObject上。这种方式依赖浏览器原生媒体流转发机制，不会像Canvas那样有额外的渲染开销，对Safari性能友好。

代码示例：

// 主视频（负责加载原始媒体缓冲区）
const mainVideo = document.getElementById('main-video');
// 从主视频生成媒体流
const sharedStream = mainVideo.captureStream();

// 批量绑定到其他视频
document.querySelectorAll('.shared-video').forEach(video => {
  video.srcObject = sharedStream;
  // 可选：同步主视频的播放状态
  mainVideo.addEventListener('play', () => video.play().catch(e => console.error(e)));
  mainVideo.addEventListener('pause', () => video.pause());
});

注意事项：

• Safari 14.1及以上版本支持captureStream()，如果需要兼容更早版本，需做降级处理
• 所有绑定的视频会同步主视频的播放进度，若需要独立控制播放状态，可移除同步逻辑

方案2：复用MediaSource缓存的媒体数据 #

如果需要让每个视频独立控制播放进度、暂停状态，同时复用已加载的媒体数据避免重复请求，可以用MediaSource API统一缓存原始媒体数据，再给每个视频分配独立的MediaSource实例加载缓存内容。

代码示例：

// 缓存已加载的视频二进制数据
let cachedVideoBuffer = null;

// 预加载并缓存视频数据
async function preloadVideo(url) {
  const res = await fetch(url);
  cachedVideoBuffer = await res.arrayBuffer();
}

// 给指定视频绑定MediaSource并加载缓存数据
function setupVideo(videoEl) {
  if (!cachedVideoBuffer) return;
  
  const ms = new MediaSource();
  videoEl.src = URL.createObjectURL(ms);
  
  ms.addEventListener('sourceopen', () => {
    // 注意替换为你的视频编码格式
    const sb = ms.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    sb.appendBuffer(cachedVideoBuffer);
    
    sb.addEventListener('updateend', () => {
      // 缓存加载完成后可播放
      videoEl.play().catch(e => console.error(e));
    });
  });
}

// 初始化流程
preloadVideo('your-video-url.mp4').then(() => {
  setupVideo(document.getElementById('main-video'));
  setupVideo(document.getElementById('video-2'));
  setupVideo(document.getElementById('video-3'));
});

注意事项：

• 需确保视频编码格式符合MediaSource的支持规范（如MP4需使用H.264视频编码和AAC音频编码）
• 每个视频拥有独立的MediaSource，可独立控制播放状态，同时复用缓存数据，节省带宽与内存

方案3：克隆VideoTrack（限同源媒体） #

如果视频是同源资源，可以直接访问主视频的videoTracks，克隆轨道后创建新的MediaStream绑定到其他视频，实现缓冲区复用。

代码示例：

const mainVideo = document.getElementById('main-video');

mainVideo.addEventListener('loadedmetadata', () => {
  // 克隆主视频的视频轨道
  const clonedVideoTrack = mainVideo.videoTracks[0].clone();
  // 若有音频，克隆音频轨道
  const clonedAudioTrack = mainVideo.audioTracks[0].clone();
  
  // 创建包含克隆轨道的媒体流
  const stream = new MediaStream([clonedVideoTrack, clonedAudioTrack]);
  
  // 绑定到目标视频
  document.getElementById('video-2').srcObject = stream;
});

注意事项：

• 仅支持同源媒体资源，跨域资源无法访问videoTracks与audioTracks
• 克隆后的轨道与原轨道共享底层缓冲区，无需额外加载

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