MSE是W3C标准，为HTML5音视频元素提供JavaScript接口，支持动态创建媒体流、追加分片、控制缓冲；其核心是解耦媒体数据来源与video标签，使JS可控加载fMP4等分片实现自适应流媒体。
HTML5 视频本身不直接支持流媒体协议（如 HLS、DASH），但通过 Media Source Extensions（MSE），可以让 JavaScript 动态构建媒体流并喂给 元素，从而实现自定义流媒体加载逻辑。这是现代 Web 端实现低延迟直播、ABR 自适应、DRM 播放等能力的基础。
什么是 MSE？核心作用是什么？
MSE 是 W3C 标准，它为 HTML5 和 提供了 JavaScript 接口，允许脚本动态创建媒体流、追加音视频片段（segments）、控制缓冲与播放。关键在于：它把“媒体数据来源”从固定 URL 解耦出来，交由 JS 控制。
典型流程是：
- 创建
MediaSource对象，并绑定到video.src - 监听
sourceopen事件，在其中创建SourceBuffer - 按需获取分片（如通过 fetch 加载 .mp4（fMP4）或 .webm 片段）
- 将二进制数据（
ArrayBuffer或Uint8Array）调用appendBuffer()写入SourceBuffer - 浏览器自动解码、渲染、管理缓冲区
为什么必须用 fMP4 而不是普通 MP4？
普通 MP4（即完整封装的 .mp4 文件）包含全局 moov box（含编码参数、时序索引等），通常位于文件开头或末尾。而 MSE 要求每个片段能独立解码和拼接，因此需要fragmented MP4（fMP4）格式：
- fMP4 将 moov 拆成
moov（初始化信息） + 多个moof + mdat（媒体分片） - 首次写入必须是含完整初始化信息的
moov（常称 init segment） - 后续追加的每个分片必须是结构完整的
moof + mdat（media segment） - 浏览器靠 init segment 建立解码上下文，再按时间戳顺序拼接 media segments
常见错误：直接 append 完整 MP4 文件 → 报错 Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement's readyState is not HAVE_METADATA 或解码失败。
如何配合流媒体协议使用 MSE？
MSE 本身不规定传输协议，它只是“数据管道”。实际中需搭配服务端支持的流式分片方案：
- HLS（需转换）：HLS 默认用 TS 格式，浏览器原生不支持 MSE 解析 TS。需服务端转成 fMP4（如用 ffmpeg + hls_flags +fmp4），或前端用 JS 解析 TS 并转为 fMP4（如 hls.js 库内部所做）
-
DASH（天然适配）：DASH 标准推荐使用 fMP4 分片（
video/mp4; codecs="avc1.64001f"），可直接通过 MSE 加载 init.mp4 和 chunk-*.m4s - 私有协议 / 低延迟直播：例如 WebSocket 推送 fMP4 片段、或按帧级切片（如 LL-HLS over HTTP/2 的 byte-range 请求），均由 JS 控制 fetch/recv 并 append 到 SourceBuffer
实际开发中要注意的关键点
MSE 行为受浏览器限制较多，易踩坑：
- 兼容性：Chrome、Edge、Firefox 支持良好；Safari 仅部分支持（iOS Safari 直接禁用 MSE，依赖原生 HLS）
-
SourceBuffer 状态管理：追加前检查
sourceBuffer.updating === false；追加后监听updateend才能继续；避免并发 append -
时间戳对齐：多个 SourceBuffer（如音视频分离）必须保证
timestampOffset和各分片presentation timestamp严格连续，否则音画不同步 -
缓冲区清理：长时间播放需调用
remove(start, end)清理已播放旧数据，防止内存溢出 -
错误处理：监听
sourceerror和video.onerror，尤其注意QuotaExceededError（缓冲超限）和InvalidStateError（状态非法）
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
