未挂载video标签时，能否通过Media Source API实现视频预取与源挂载切换？

能不能用Media Source API实现你的需求？ #

完全可以，核心是绕开“必须挂载video到DOM才能触发sourceopen”的误区——浏览器允许未挂载到DOM的video元素触发MediaSource的初始化流程，只要给它设置了src，就能触发sourceopen事件，进而完成源的预加载。

具体实现步骤 #

1. 用隐藏video触发MediaSource初始化（无需挂载DOM）

你可以创建一个内存中的video实例，用来触发MediaSource的sourceopen事件，然后在回调里初始化SourceBuffer并按需加载分片：

// 创建不挂载到页面的video元素
const hiddenVideo = document.createElement('video');
const mediaSource = new MediaSource();
const mediaUrl = URL.createObjectURL(mediaSource);

// 给隐藏video设置src，触发MediaSource初始化
hiddenVideo.src = mediaUrl;

mediaSource.addEventListener('sourceopen', async () => {
  // 这里可以初始化对应编码的SourceBuffer
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  
  // 按需加载视频分片（示例逻辑，实际替换成你的获取逻辑）
  await loadVideoSegment(sourceBuffer, 'initial-part.mp4');
  // 后续可以继续加载更多分片到sourceBuffer中，不用依赖任何可见的播放器
});

2. 实现源的动态附加与分离

当需要把预加载好的源绑定到可见播放器时：

const targetPlayer = document.getElementById('your-video-player');

// 确保MediaSource处于可用状态
if (mediaSource.readyState === 'open') {
  // 清理目标播放器之前的资源
  if (targetPlayer.src) {
    URL.revokeObjectURL(targetPlayer.src);
  }
  // 将预加载的MediaSource绑定到目标播放器
  targetPlayer.src = URL.createObjectURL(mediaSource);
}

分离源时，只需清空播放器的src即可，MediaSource会保留已加载的分片，后续可以再次附加：

targetPlayer.src = '';
// mediaSource实例依然有效，已加载的分片不会丢失

如果需要管理多个源，只需为每个源创建独立的MediaSource和隐藏video实例即可。

有没有更好的替代方案？ #

• 如果你的视频采用HLS/DASH这类自适应格式，直接用浏览器原生支持的播放方式更简单：只需给video设置对应的m3u8/mpd地址，浏览器会自动处理按需加载和预缓存，你可以通过video.preload控制预加载程度，随时切换src实现附加/分离，无需手动操作MediaSource。
• 要是你需要自定义分片逻辑、多源合并这类精细控制，Media Source API依然是最优选择，上述的隐藏video方案可以完美解决预加载的问题。

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