HTML5原生video标签不支持无缝清晰度切换；需用MSE实现真平滑（复用SourceBuffer、PTS对齐、缓冲清理）、HLS/DASH协议自动ABR切换，或换src+状态恢复的简易方案。

HTML5 原生 标签不支持运行时无缝切换清晰度——直接改 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 状态
• 替换 的 src 或直接设 video.src，然后调用 video.load()
• 监听 canplay 事件（不是 loadeddata），在此回调中恢复 currentTime 并按原状态调用 play() 或保持暂停
• 注意：MP4 文件需带关键帧索引（moov 在前），否则 seek 可能失败；建议所有清晰度版本用相同编码参数（如 GOP 长度、profile）提升兼容性

是否需要平滑，取决于用户预期和业务场景。MSE 和流媒体协议解决的是“无感切换”，而换 src 是“可控中断”。选哪种，看你的播放器定位和维护成本承受力。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！