MediaSource 不支持不同编码格式的 SourceBuffer 叠加播放，因每个 SourceBuffer 绑定唯一解码器且需严格匹配 MIME type；替代方案包括服务端转封装、前端按能力选源或多 MediaSource 切换。
MediaSource 接口本身不支持“不同编码格式的 SourceBuffer 叠加播放”——浏览器明确禁止在同一个 MediaSource 实例中添加多个不同编解码器（codec）的 SourceBuffer。这不是限制，而是规范强制要求：每个 SourceBuffer 必须对应唯一、一致的 MIME type（含 codecs 参数），且所有写入该 SourceBuffer 的数据必须严格匹配该编码格式。
为什么不能叠加不同编码格式
SourceBuffer 是解码上下文的绑定单元。浏览器为每个 SourceBuffer 单独初始化解码器（如 H.264 decoder 或 VP9 decoder）。若允许混用编码，会导致解码器冲突、状态错乱或直接抛出 InvalidStateError。例如：
- 调用
mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"')后，再尝试添加'video/webm; codecs="vp9"'，会触发 DOMException - 即使绕过添加阶段，在已存在的 avc1 SourceBuffer 中 append VP9 数据，也会在
updatingend时失败，并触发sourceBuffer.onerror
替代方案：按格式分源、动态切换
若需支持多种编码（如 H.264/VP9/AV1），应避免“叠加”，转而采用运行时切换策略：
- 服务端统一转封装：将不同编码的原始流，统一转为同一种容器+编码（如 fragmented MP4 + AVC），由后端完成适配，前端只处理单一格式
-
前端按能力选源：先用
MediaSource.isTypeSupported()检测当前浏览器支持的 codecs（如isTypeSupported('video/mp4; codecs="av01.0.05M.08"')），再加载对应编码的完整流，创建唯一 SourceBuffer -
多 MediaSource 切换：预创建多个 MediaSource 实例（每种编码一个），通过更换
video.src = URL.createObjectURL(mediaSourceX)切换；注意需先revokeObjectURL旧地址并重置mediaKeys（如有 DRM）
音频与视频必须分离但编码各自独立
虽然音视频不能混在同一 SourceBuffer，但可以共存于同一 MediaSource —— 需分别创建两个 SourceBuffer：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 一个用于视频：
addSourceBuffer('video/mp4; codecs="avc1.42E01E"') - 一个用于音频：
addSourceBuffer('audio/mp4; codecs="mp4a.40.2"')
二者编码可不同（如 AVC + AAC），但必须属于同一容器体系（如都为 MP4 封装），且时间戳（PTS/DTS）严格对齐。浏览器会自动同步解码输出。
兼容性兜底建议
面向真实终端时，优先保障 H.264 + AAC 组合：
- iOS Safari、旧版 Android WebView 基本只认
video/mp4; codecs="avc1.42E01E, mp4a.40.2" - Chrome/Firefox 可额外支持 VP9/Opus 或 AV1/AV1，但需单独建立新 MediaSource 流程，不可与 AVC 混用
- 不要试图在一个 SourceBuffer 中“混合”avc1 和 av01 片段，即便它们同属 MP4 容器 —— codecs 不匹配即非法
