controlslist仅支持nodownload、nofullscreen、noremoteplayback三个值，分别隐藏下载、全屏和投屏按钮；它必须与controls共存才生效，且仅chromium系浏览器支持，firefox和safari完全忽略。
controlslist 属性支持哪些可隐藏的按钮
controlslist 是 <video></video> 和 <audio></audio> 标签的原生属性，仅在 Chromium 系列浏览器（Chrome、Edge、Opera）中生效，Firefox 和 Safari 完全忽略它。它接受空格分隔的字符串值，每个值对应一个可禁用的控制项。
目前支持的值只有三个：nodownload、nofullscreen、noremoteplayback。注意：nocontrols 或 nomute 这类写法无效 —— 浏览器不会报错，但也不会起作用。
-
nodownload：隐藏下载按钮（右下角三点菜单里的“下载”选项也会被禁用） -
nofullscreen：隐藏全屏按钮，且调用element.requestFullscreen()会被拒绝 -
noremoteplayback：禁用投屏按钮（如 Chromecast 图标），对<video></video>有效，<audio></audio>上部分版本可能不响应
为什么加了 controlslist 却没效果
最常见的失效原因是浏览器兼容性或 HTML 结构问题。比如在 Safari 中写 controlslist="nodownload" 完全无反应，这是预期行为，不是代码错误。
另一个高频坑是：该属性必须和 controls 属性共存才有意义。如果没写 controls，整个控件栏都不显示，controlslist 自然无从作用。
- ✅ 正确：
<video controls controlslist="nodownload nofullscreen"></video> - ❌ 无效：
<video controlslist="nodownload"></video>（缺少controls） - ❌ 无效：
<video controls controlslist="nomute"></video>（nomute不是合法值）
如何优雅降级处理不支持的浏览器
不能靠 controlslist 实现跨浏览器统一 UI。想隐藏下载按钮，在 Firefox 中得靠 CSS 遮盖，Safari 则需服务端拦截 Accept-Ranges 头来禁掉 Range 请求，从而让右键“另存为”失效。
更实际的做法是：用 JavaScript 检测是否支持 controlslist，再动态添加属性：
if ('controlsList' in HTMLMediaElement.prototype) {
video.setAttribute('controlslist', 'nodownload nofullscreen');
}
注意：'controlsList' 是 DOM 属性名（驼峰），而 HTML 属性名是 controlslist（全小写）。别混淆大小写。
隐藏播放/音量等核心按钮？别指望 controlslist
controlslist 无法隐藏播放、暂停、音量、进度条这些基础控件。它只管“附加功能按钮”。想定制这些，唯一可靠方式是彻底移除 controls，自己用 JS + play()、pause()、muted、volume 等 API 手写控件。
这时候要注意：controlslist 在自定义控件场景下毫无价值 —— 它只影响原生控件栏的子按钮。而且一旦手写控件，就绕过了所有原生限制，包括 nodownload 的防护能力（用户仍可通过开发者工具拿到 src 地址）。
真正难的不是怎么写 controlslist，而是意识到它只是个有限的、浏览器专属的微调开关，不是 UI 控制的万能钥匙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
