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。

用法/示例

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/