html5视频播放器需主动调用sourcebuffer.remove(start, end)清理已播放缓冲区，范围须在buffered内且避开播放位置附近（建议保留3秒安全余量），并避免updating为true时操作。
HTML5 视频播放器本身不自动清理已播放的媒体数据，必须由开发者主动管理缓冲区。关键不是“清空全部”，而是精准移除已过期、不再需要的片段，既节省内存又避免卡顿。
用 sourceBuffer.remove() 清理已播放时间段
这是 MediaSource API 提供的唯一标准方式，适用于通过 MediaSource 动态拼接视频流（如 MSE 播放器）的场景：
- 调用
sourceBuffer.remove(start, end)，参数单位为秒，范围必须完全落在sourceBuffer.buffered内，否则会报错 - 不能删除当前播放位置附近的数据——建议保留至少 3 秒安全余量，即只清理
currentTime − 3之前的区间 - 不要在
sourceBuffer.updating === true时调用，应监听updateend事件后再执行清理
结合播放进度自动触发清理
靠手动清理不现实，需嵌入播放逻辑中持续监控：
- 推荐使用
requestVideoFrameCallback（比ontimeupdate更精准）获取当前播放时间 - 遍历
sourceBuffer.buffered的每个时间区间，对满足end 的区间调用 <code>remove() - 避免高频小范围清理（如每 100ms 清 0.1s），建议聚合操作：每 2–5 秒检查一次，一次性清理 2–5 秒的旧数据
别漏掉其他类型的缓存干扰
媒体数据只是缓存的一部分，以下几类也会影响播放行为，需同步排查：
-
Service Worker 缓存：若网站注册了 SW，它可能拦截媒体请求并返回旧响应。进
Application → Service Workers点 “Unregister”，再进Cache Storage手动删对应缓存 -
HTTP 缓存（图片/文件）：浏览器可能缓存了 .mp4/.webm 文件本身。按
Ctrl + Shift + Delete，选“所有时间”，勾选“缓存的图片和文件”清除 -
localStorage/sessionStorage：虽不存视频数据，但若缓存了播放位置、分段 URL 等状态，也可能导致行为异常。可执行
localStorage.clear()和sessionStorage.clear()
验证清理是否生效
清理后可通过代码确认效果，但注意差异来源：
- 调用
sourceBuffer.buffered.length查看剩余缓冲区间数 - 对比
video.buffered和sourceBuffer.buffered，二者可能不一致——因为多个sourceBuffer的缓冲区会被浏览器合并显示在video.buffered中 - 实际观察内存占用变化（DevTools → Memory 面板）比单纯查 buffered 更直观
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
