Media Source Extensions（MSE）：自适应流与缓冲管理

--- title: Media Source Extensions（MSE）：自适应流与缓冲管理 keywords: - MediaSource - SourceBuffer - appendBuffer - 自适应码率 - 缓冲治理 description: 使用 MSE 构建自适应视频播放，管理 SourceBuffer 的追加与移除、时序与错误，提升播放稳定性与切换体验。 tags: - MediaSource - SourceBuffer - Web API - appendBuffer - 媒体 - 流 - 缓冲治理 - 自适应码率 categories: - 应用软件 - 编程开发 --- ## 概述 MSE 允许在浏览器中动态向媒体元素附加字节流，适用于 DASH/HLS 等分片播放与码率切换。核心对象包括 `MediaSource` 与 `SourceBuffer`。 ## 用法/示例 ```js const video = document.querySelector('video') const ms = new MediaSource() video.src = URL.createObjectURL(ms) ms.addEventListener('sourceopen', async () => { const sb = ms.addSourceBuffer('video/webm; codecs="vp09.00.10.08"') const chunk = await fetch('/seg-000.webm').then(r => r.arrayBuffer()) sb.appendBuffer(chunk) sb.addEventListener('updateend', () => { ms.duration = video.buffered.end(video.buffered.length - 1) }) }) ``` ## 工程建议 - 控制缓冲区大小与清理策略（`remove`），防止内存膨胀；处理 `QuotaExceededError`。 - 在码率切换时避免频繁来回震荡；依据网络与解码能力做决策。 - 校验容器与编解码兼容矩阵；对不支持环境回退普通播放。 ## 参考与验证 - MDN：Media Source Extensions — https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API - W3C：MSE — https://www.w3.org/TR/media-source/