controlsList是HTML5 video/audio的提示型属性,非布尔值,支持nodownload、nofullscreen等空格分隔值,仅Chrome/Edge较好支持,Firefox/Safari基本不支持,且不阻止开发者工具下载。

controlslist 是 HTML5 <video></video> 和 <audio></audio> 元素的一个布尔属性,用于提示浏览器隐藏某些原生控件按钮。但它不是强制性的——浏览器是否遵守取决于实现,目前主要在 Chrome、Edge(基于 Chromium)中支持较好,Firefox 和 Safari 基本不支持或忽略该属性。
controlslist 支持的值有哪些
该属性接受空格分隔的字符串,常用值包括:
- nodownload:隐藏下载按钮(防止用户点击下载视频文件)
- nofullscreen:隐藏全屏按钮
-
nofullscreen 和 nodownload 可同时使用,例如:
controlslist="nodownload nofullscreen" - 其他值如 hidecontrols(实验性,非标准,部分旧版 Chrome 曾支持但已弃用)不推荐使用
基础用法示例
在 <video></video> 标签中直接添加 controlslist 属性即可:
注意:controls 属性必须存在,否则不会显示任何控件,controlslist 才有意义。
立即学习“前端免费学习笔记(深入)”;
兼容性与注意事项
该属性属于“提示型”(hint),不是强制策略:
- Chrome / Edge(Chromium 内核)会尊重
nodownload和nofullscreen - Firefox 当前完全忽略
controlslist,下载和全屏按钮仍会显示 - Safari 不支持该属性,且其原生控件本身不提供下载按钮(除非视频资源响应头含
Content-Disposition: attachment) - 即使隐藏了下载按钮,用户仍可通过右键另存、开发者工具获取源地址、或网络面板下载视频——它仅影响 UI,不提供安全防护
替代方案(增强控制力)
若需更可靠的隐藏效果或跨浏览器一致行为,建议:
- 移除
controls属性,改用自定义控件(通过 JavaScript +play()/requestFullscreen()等 API 控制) - 服务端禁用直接访问视频 URL(如用 token 鉴权、短时效链接、或流式传输如 HLS/DASH)
- 对敏感内容,避免使用纯前端视频标签,考虑 DRM 或 WebRTC 方案



















