chrome 90+ 和 edge 90+ 原生稳定支持 controlslist，是目前最可靠的无 js 隐藏控件方式；支持 nodownload、noplaybackrate、nofullscreen、noremoteplayback、disablepictureinpicture 和 noprogress 等值，但 firefox 和 safari 支持有限，需分层兼容处理。
Chrome 和 Edge 对 controlsList 的支持情况
Chrome 90+ 和 Edge 90+ 原生支持 controlsList，且行为稳定。这是目前最可靠、无需 JS 干预的隐藏控件方式——前提是只面向现代 Chromium 内核用户。
关键事实：
-
controlsList是 HTML 标准属性，不是 CSS 或 JS API，直接写在<video></video>标签里生效 - Chrome 83 起初步支持，但完整功能（如
noprogress）需 90+；Edge 90 同步跟进 Blink 渲染引擎更新 - 不支持时浏览器会静默忽略该属性，不会报错，但控件仍完整显示
哪些 controlsList 值在 Chrome/Edge 真正有效
不是所有 token 都被 Chromium 实现。实测有效的值（2026 年主流版本）：
-
nodownload：移除下载按钮（完全生效） -
noplaybackrate：隐藏播放速度选择器（Chrome/Edge 默认显示，加此值后消失） -
nofullscreen：禁用全屏按钮（注意：不影响requestFullscreen()JS 调用） -
noremoteplayback：阻止 Chromecast / AirPlay 图标出现 -
disablePictureInPicture：配合disablePictureInPicture属性使用，彻底关闭画中画入口 -
noprogress：隐藏进度条和时间显示（仅 Chromium 系，Safari/Firefox 不识别）
⚠️ 注意：nodownload 在 Safari 14+ 有解析异常，可能失效；noprogress 在 Firefox 完全无效。
为什么不能只靠 controlsList 做跨浏览器兼容
因为 controlsList 是“请求式”属性，浏览器有权拒绝。Firefox 88+ 仅部分支持（nodownload 可用，noprogress 忽略），Safari 14+ 对 nodownload 解析异常，甚至导致下载按钮反而常驻。
典型问题现象：
- 同一段 HTML，在 Chrome 中进度条消失，Firefox 里依然完整显示
- Safari 14 下加了
controlsList="nodownload"，但右键菜单仍有“下载视频”项 - Firefox 89 切换 Tab 时触发
ResizeObserver loop completed with undelivered notifications，界面卡死
所以，如果你的用户包含 Firefox 或 Safari 用户，controlsList 只能作为增强手段，不能替代 JS + 自定义控件方案。
实际项目中怎么安全使用 controlsList
先检测支持性，再有条件启用：
const video = document.querySelector('video');
if ('controlsList' in document.createElement('video')) {
video.controlsList = 'nodownload noplaybackrate nofullscreen';
}
更稳妥的做法是分层处理：
- 基础层：始终保留
controls属性，确保所有浏览器有基本控制能力 - 增强层：对 Chromium 用户用
controlsList收敛 UI - 兜底层：对 Safari/Firefox 用户，用
video::-webkit-media-controls伪类 +display: none隐藏特定按钮（仅限 WebKit/Blink）
真正容易被忽略的是：即使加了 noprogress，用户仍可通过拖拽视频时间轴（如地址栏输入 video.currentTime = 120）跳转——controlsList 不影响 JS 控制能力，它只管原生 UI。
