HTML5原生video不支持运行时清晰度切换，需通过替换src、切换source或MSE（HLS/DASH）实现；MP4切换有黑屏风险，HLS/DASH才是自适应首选。

HTML5 <video></video> 本身不支持运行时切换清晰度

浏览器原生 <video></video> 元素没有内置的「清晰度切换」能力，quality、res 这类属性并不存在于标准中。所谓“切换清晰度”，本质是**替换 src 或切换 <source></source> 元素**，或使用 MSE（Media Source Extensions）动态加载不同码率的分片（如 HLS/DASH）。直接改 video.src 最简单，但有黑屏、卡顿、丢失播放进度等风险。

用 JavaScript 切换 <source></source> 并重新加载

适用于预置几档固定分辨率 MP4 文件的轻量场景。关键点不是只改 src，而是触发 load() 并手动恢复播放状态：

• 先保存当前 video.currentTime 和 video.paused 状态
• 替换 video.src 或清空/重写 <source></source> 后调用 video.load()
• load() 触发 loadedmetadata 事件后，再 seekTo() 并按需 play()
• 注意：Safari 对 MP4 的 load() 后 seek 支持不稳定，可能跳回开头

<video id="myVideo" controls>
  <source src="video-480p.mp4" type="video/mp4">
</video>

<button onclick="switchQuality('720p')">720p</button>

<script>
function switchQuality(res) {
  const v = document.getElementById('myVideo');
  const wasPlaying = !v.paused;
  const time = v.currentTime;

  v.src = `video-${res}.mp4`;
  v.load();

  v.addEventListener('loadedmetadata', () => {
    v.currentTime = time;
    if (wasPlaying) v.play().catch(e => console.warn('autoplay blocked:', e));
  }, { once: true });
}
</script>

HLS 或 DASH 才真正支持自适应清晰度切换

MP4 是单一文件，无法动态调整；而 HLS（.m3u8）和 DASH（.mpd）是索引+分片协议，播放器可实时选择不同码率的片段。浏览器原生仅支持 HLS（iOS/macOS Safari），DASH 需靠 dash.js 或 hls.js 这类 JS 库。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• hls.js 在 Chrome/Firefox/Edge 中模拟 HLS 支持，提供 hls.levels 和 hls.currentLevel API
• 设置 hls.currentLevel = index 即可切换，库会自动处理缓冲、无缝过渡（若时间戳对齐）
• DASH 需引入 dash.js，通过 player.getBitrateInfoList() 和 setQualityFor('video', level)
• 务必开启 CORS，否则分片请求会被跨域拦截

手动实现清晰度菜单时容易忽略的细节

很多开发者只关注“能切”，却在体验上翻车：

立即学习“前端免费学习笔记（深入）”；

• 切换前未检查新清晰度资源是否已加载元数据（readyState 时 <code>currentTime 设置无效）
• 未禁用切换按钮直到 loadeddata 触发，导致用户连点多次引发竞态
• 移动端 iOS Safari 下，play() 必须由用户手势触发，不能在异步回调里静默调用
• 如果视频启用了 controls，自定义清晰度按钮建议用 display: none 隐藏原生控件，避免 UI 冲突
• HTTP Range 请求头缺失会导致 MP4 切换时从头加载——确保服务端支持 Accept-Ranges: bytes

实际项目中，除非只有两三个小尺寸 MP4 文件，否则别硬扛纯 HTML5 方案。用 hls.js 加一个 .m3u8 主清单，几乎是最省心、兼容性最好、体验最接近原生的路径。