html5原生video不支持运行时切换画质，需借助mse实现平滑切换：复用同一sourcebuffer、严格对齐分片pts、按缓冲水位动态切换码率。
HTML5 原生 <video></video> 不支持运行时切换画质，所谓“平滑切换”必须绕过直接换 src 的简单做法，依赖 Media Source Extensions（MSE）构建可控的媒体管道。核心不是替换视频元素，而是复用 SourceBuffer、按时间对齐分片、动态管理缓冲水位，才能避免黑屏、跳帧和卡顿。
复用同一个 SourceBuffer，不新建不销毁
每个媒体类型（如视频）只创建一个 SourceBuffer，所有码率切换都往这个 buffer 里追加数据。频繁 add/remove SourceBuffer 会触发重初始化，造成明显卡顿或黑屏。
- 在
sourceopen阶段一次性调用addSourceBuffer('video/mp4; codecs="avc1.42E01E"') - 后续所有清晰度切换，都使用同一 SourceBuffer 的
appendBuffer() - 切换前无需清空全部 buffer，只需用
remove(start, end)清理即将被覆盖的时间段（例如当前播放点前 0.5 秒）
确保分片时间戳严格对齐
不同分辨率的视频分片若 PTS（显示时间戳）不一致，浏览器无法连续解码，轻则跳帧，重则花屏或 seek 失败。
- 服务端切片时，各码率版本需统一 GOP 结构和起始 PTS（推荐统一从 0 开始，每段 4 秒）
- 前端 append 前检查：新分片的
startTimestamp应与当前buffered.end误差 ≤ 100ms - 若间隙为 200–500ms，可插入黑帧填充；超过 500ms 则丢弃该分片，改请求邻近段
按缓冲水位和网络状态驱动切换时机
切换是否“平滑”，取决于用户是否感知卡顿。关键不是立刻切，而是选对时机，并留出安全余量。
- 缓冲区低于 3 秒 → 立即降码率，优先保流畅
- 缓冲区稳定在 8–12 秒，且最近一段下载耗时比（实际/预估）
- 每次切换后启用 8 秒滞留窗口，防止反复震荡
- 监听
updateend事件确认 append 完成，再决定是否拉取下一段
错误处理与快速回退机制
弱网或服务异常时，单次失败不能中断播放。需有兜底策略保障连续性。
-
fetch失败或appendBuffer()抛错 → 立即改用低一档码率重试同一时间段 - 监听
sourceBuffer.error，触发后暂停追加，清空 pending 操作，等待恢复 - 连续两次降码率仍无法维持缓冲水位 → 启用低延迟模式（缩短分片长度、减少预加载量）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
