HTML5原生video标签不支持无缝清晰度切换；需用MSE实现真平滑（复用SourceBuffer、PTS对齐、缓冲清理）、HLS/DASH协议自动ABR切换，或换src+状态恢复的简易方案。
HTML5 原生 <video></video> 标签不支持运行时无缝切换清晰度——直接改 src 会触发重加载，导致黑屏、卡顿、播放中断。要实现“动态切换且保持流畅”，必须绕过简单换源方式，采用更底层的控制机制。
优先用 MSE 实现真平滑切换
Media Source Extensions（MSE）是唯一能真正避免黑屏、维持解码连续性的方案，适用于自建播放器或深度定制场景：
- 在
sourceopen阶段只创建一个SourceBuffer（如video/mp4; codecs="avc1.42E01E"），后续所有清晰度都复用它，不新建也不销毁 - 各清晰度视频分片必须严格对齐 PTS（推荐统一从 0 开始，每段 4 秒，GOP 结构一致）；前端追加前检查时间戳误差 ≤100ms，否则填充黑帧或丢弃
- 切换前用
remove(start, end)清理当前播放点前约 0.5 秒的缓冲区，避免时间重叠导致解码异常 - 切换时机由缓冲水位驱动：低于 3 秒立即降码率保流畅；稳定在 8–12 秒再考虑升码率；每次切换后启用 8 秒滞留窗口防抖动
快速上线可用：HLS 或 DASH 自适应流
若不想从零实现 MSE 管道，直接使用标准流媒体协议是最稳妥的选择：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- HLS（
.m3u8）或 DASH（.mpd）本身已定义多码率清单，主流播放器（如 hls.js、dash.js、Shaka Player）内置 ABR 策略，可自动选码率 - 手动切换清晰度只需调用播放器 API，例如 hls.js 中
hls.levels列出可用清晰度，hls.currentLevel = index即可切换，底层自动处理缓冲与分片对齐 - 服务端需按规范生成多分辨率切片 + 清单文件，确保音视频时间轴严格同步，否则仍会出现跳帧或花屏
简易兼容方案：换 src + 状态恢复（仅限轻量需求）
对低要求场景（如内部工具、非实时课程视频），可用 JavaScript 换源并尽力减少中断感：
立即学习“前端免费学习笔记（深入）”；
- 保存当前
currentTime和paused状态 - 替换
<source></source>的src或直接设video.src，然后调用video.load() - 监听
canplay事件（不是loadeddata），在此回调中恢复currentTime并按原状态调用play()或保持暂停 - 注意：MP4 文件需带关键帧索引（moov 在前），否则 seek 可能失败；建议所有清晰度版本用相同编码参数（如 GOP 长度、profile）提升兼容性
是否需要平滑，取决于用户预期和业务场景。MSE 和流媒体协议解决的是“无感切换”，而换 src 是“可控中断”。选哪种，看你的播放器定位和维护成本承受力。
