HTML5中需调用sourceBuffer.remove(start, end)主动清理已播放缓冲区，清理范围须在buffered内且避开播放位置附近（建议保留3秒安全余量），并避免updating为true时操作。
在HTML5中，MediaSource接口本身不提供直接“移除已播放完毕缓冲区”的方法，但可以通过 sourceBuffer.remove() 主动清理已播放时间段的缓冲数据，配合时间监控实现动态缓冲区管理。
理解缓冲区清理的时机与范围
浏览器不会自动清除已播放的视频片段，需开发者主动调用 remove(start, end) 清理指定时间范围（单位：秒）的数据。关键点包括：
- 清理时间范围必须完全落在当前
sourceBuffer.buffered内，否则抛出 DOMException - 不能删除正在播放位置附近（通常建议保留至少 1–2 秒）的数据，避免卡顿或解码中断
- 多次调用
remove()可分段清理，例如每 5 秒清理一次已过期片段
监听播放进度并触发清理
使用 video.ontimeupdate 或 requestVideoFrameCallback（更精准）获取当前播放时间，结合 buffered 判断可清理区间：
- 遍历
sourceBuffer.buffered的时间范围，找出所有end < currentTime − safetyMargin的区间 - 对每个匹配区间调用
sourceBuffer.remove(start, end) - 推荐设置安全余量（如 3 秒），即只清理早于当前播放时间 3 秒以上的数据
避免常见错误与性能陷阱
不当清理易引发播放异常，需注意：
立即学习“前端免费学习笔记（深入）”；
- 不要在
sourceBuffer.updating === true时调用remove()，应等待updateend事件后再操作 - 频繁小范围 remove（如每 100ms 清 0.1s）会增加开销，建议聚合清理（如每 2–5 秒清一次 2–5 秒区间）
- 清理后可通过
sourceBuffer.buffered.length和video.buffered验证效果，但注意二者可能略有差异（因多 Buffer 合并）
简单示例逻辑（伪代码）
以下为可嵌入实际流式播放器的核心清理逻辑框架：
- 监听
video.ontimeupdate，获取currentTime - 检查
sourceBuffer.buffered.length > 0，取第一个区间[start, end] - 若
end < currentTime − 3，执行sourceBuffer.remove(start, end) - 清理后监听
sourceBuffer.onupdateend，再继续下一轮判断
