HTML5中实现多音轨需用MediaSource配合多个SourceBuffer：1. 初始化MediaSource并绑定media元素；2. 按轨道类型（视频/音频/字幕）分别创建对应MIME类型的SourceBuffer；3. 按时间顺序追加fMP4格式数据块，确保时间戳对齐；4. 通过应用层逻辑调度切换音轨。
在HTML5中，通过 MediaSource 和 addSourceBuffer() 动态添加音视频轨道（如多语言音频轨、字幕轨或自适应码率的视频轨），核心在于正确创建并管理多个 SourceBuffer 实例，并确保它们符合同一 MediaSource 的时间线与编码约束。这不是简单地“追加轨道”，而是需手动解析媒体片段、按轨道类型分别初始化缓冲区，并同步时间戳。
1. 初始化 MediaSource 并关联到 media 元素
必须先创建 MediaSource 实例，设置其 readyState 为 "open" 后，再赋值给 或 的 src 属性：
const mediaSource = new MediaSource();
const video = document.querySelector('video');
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', () => {
// 此时可安全调用 addSourceBuffer()
});
2. 按轨道类型分别创建 SourceBuffer
每个音轨、视频轨或文本轨需独立的 SourceBuffer，且 MIME 类型必须精确匹配实际数据（含编解码器参数）：
-
主视频轨：
mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001f"') -
备用音频轨（如英语）：
mediaSource.addSourceBuffer('audio/mp4; codecs="mp4a.40.2"') -
另一音频轨（如中文）：
mediaSource.addSourceBuffer('audio/mp4; codecs="mp4a.40.5"') -
WebVTT 字幕轨：需配合
元素，SourceBuffer不直接支持文本；应使用TextTrackAPI 动态添加 cue
⚠️ 注意：addSourceBuffer() 返回的 SourceBuffer 对象需保存引用，后续所有 appendBuffer()、remove() 操作都依赖它。
3. 按时间顺序追加对应轨道的数据块
数据必须是 ISO BMFF（MP4）格式的 ArrayBuffer 片段（如 fMP4），且每个片段需包含完整 moof+mdat 结构，时间戳（presentation timestamp）必须严格递增、无重叠，并与其他轨道对齐：
- 使用
sourceBuffer.appendBuffer(arrayBuffer)添加二进制数据 - 监听
updateend事件确认追加完成，再追加下一帧 - 若出现
sourcebuffer.updating === true，需等待updateend再操作，避免报错 - 不同轨道的
timestampOffset可设为相同值（如0），确保起始时间对齐
示例：
const videoBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001f"');
const audioBuffer = mediaSource.addSourceBuffer('audio/mp4; codecs="mp4a.40.2"');
// 假设已获取分片数据
fetch('/video-init.mp4').then(r => r.arrayBuffer()).then(init => {
videoBuffer.appendBuffer(init);
audioBuffer.appendBuffer(init); // 初始化片段通常共用
});
fetch('/video-seg1.m4s').then(r => r.arrayBuffer()).then(data => {
videoBuffer.appendBuffer(data);
});
fetch('/audio-seg1.m4s').then(r => r.arrayBuffer()).then(data => {
audioBuffer.appendBuffer(data);
});
4. 启用和切换音轨（需结合 HTMLTrackElement）
SourceBuffer 本身不提供轨道开关接口。要实现多音轨切换，需在 上动态添加 元素，并用 JavaScript 控制 track.mode：
- 为每条音频轨预先创建
或使用kind="subtitles"占位（实际音频切换靠后端流控） - 真正切换音频输出，应由播放器逻辑控制：暂停当前
SourceBuffer追加，启用另一条音频SourceBuffer，并确保其时间戳与视频连续 - 浏览器原生
video.audioTracks列表仅反映MediaSource动态添加的音频轨不可见；因此切换必须由应用层完全接管
简言之：多音轨播放 = 多个 SourceBuffer + 手动时间同步 + 应用层轨道调度逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
