平滑切换码率需复用同一sourcebuffer，动态追加新分片、按时间戳对齐、控制缓冲水位（如＜3秒降码率、8–12秒且网络良好可升码率），并设滞留窗口防抖动；错误时降级重试或启用低延迟模式。
平滑切换不同码率的 SourceBuffer，核心不是“替换 buffer”，而是复用同一个 SourceBuffer，通过动态追加新码率分片、及时清理旧数据、控制缓冲水位来实现视觉和播放层面的无缝过渡。原生 <video></video> 不支持运行时切换 src 后保持时间点继续播，更不支持多码率 buffer 并行管理——必须靠 MediaSource Extensions（MSE）手动编排。
复用 SourceBuffer，不新建不销毁
每个媒体类型（如视频或音频）只创建一个 SourceBuffer，不要为每个码率建一个。频繁 add/remove SourceBuffer 会触发重初始化，造成卡顿或黑屏。
- 在
sourceopen阶段一次性创建：addSourceBuffer('video/mp4; codecs="avc1.42E01E"') - 后续所有码率切换，都往这同一个 SourceBuffer 中 append 新分片
- 切换前无需调用
remove()清空全部，只需按需清理即将被覆盖的时间段
按时间戳对齐分片，避免解码断层
不同码率的分片必须有严格一致的 presentation timestamp（PTS），否则浏览器无法连续解码，会出现跳帧、花屏或 seek 失败。
- 服务端切片时，确保各码率版本使用相同 GOP 结构和起始 PTS（例如统一从 0 开始，每段 4 秒）
- 前端 append 前检查：新分片的
startTimestamp应与当前buffered.end尽量接近（误差 ≤ 100ms） - 若存在小间隙（如 200ms），可插入黑帧（视频）或静音帧（音频）填充；若间隙过大（＞500ms），建议丢弃该分片并请求邻近段
控制缓冲区水位，驱动切换时机
切换是否“平滑”，取决于用户是否感知到卡顿或画质突变。关键不是立刻切，而是选对时机，并留出安全余量。
- 缓冲区低于 3 秒 → 立即降码率，优先保流畅
- 缓冲区稳定在 8–12 秒且网络下载耗时比（实际/预估）＜0.9 → 可试探升一级码率
- 每次切换后启用“滞留窗口”：8 秒内禁止再次切换，防止抖动震荡
- 监听
updateend事件，在 append 完成后检查buffered范围，再决定是否发起下一段请求
处理错误与回退，保障播放连续性
即使逻辑严谨，弱网或服务异常仍可能导致某段高码率分片加载失败或解析异常。此时需有快速兜底机制。
- fetch 失败或
appendBuffer()抛错 → 立即改用低一档码率重试同一时间段 - 监听
sourceBuffer.error，触发后清空当前 pending 操作，暂停追加，等待updateend后再恢复 - 若连续两次降码率仍无法维持缓冲水位，可临时启用“低延迟模式”：缩短分片时长（如从 4s 改为 2s），加快响应速度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
