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

概述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_APIW3C：MSE — https://www.w3.org/TR/media-source/