controlslist 是 video/audio 的布尔属性，用于控制原生控件显示：nodownload 隐藏下载按钮，nofullscreen 隐藏全屏按钮，noremoteplayback 隐藏投屏按钮；需配合 controls 使用，仅 chromium 支持，不提供功能级禁用。
controlsList 是 HTML5 <video></video> 和 <audio></audio> 标签的一个布尔型属性，用于精细控制原生播放器控件栏中哪些按钮可见或可用。它本身不启用/禁用功能，只影响 UI 元素的显示状态。
支持的值及其作用
该属性接受空格分隔的字符串，每个值对应隐藏某类控件：
- nodownload：隐藏下载按钮（防止用户直接保存媒体文件）
- nofullscreen：隐藏全屏切换按钮（适用于嵌入式场景或受限 UI）
- nofullscreen 和 noRemotePlayback（注意拼写）：隐藏投屏按钮（如 Chrome 中的 Cast 图标）
- noremoteplayback：禁用远程播放（如 Chromecast、AirPlay），同时隐藏对应 UI
使用方式与注意事项
需配合 controls 属性使用，否则控件栏不显示，controlsList 无效：
<video controls controlslist="nodownload nofullscreen"><source src="demo.mp4" type="video/mp4"></source></video>
注意以下几点：
- 浏览器兼容性有限：Chrome 和 Edge 支持较完整；Firefox 和 Safari 目前基本不支持该属性
- 不提供功能级禁用：例如
nodownload仅隐藏按钮，无法阻止用户通过开发者工具或网络面板获取资源链接 - 值区分大小写，必须小写，且不能带引号内的多余空格（如
"nodownload nofullscreen"中双空格可能被部分浏览器忽略）
常见误用与替代思路
有人试图用 controlsList 实现“禁用右键保存”或“完全阻止下载”，这是不可行的。媒体资源一旦加载到页面，就可被技术手段获取。若需更强保护，应考虑：
- 服务端权限控制（如签名 URL、短期 Token）
- 流式传输（HLS/DASH）配合 DRM（如 Widevine、FairPlay）
- 自定义播放器 UI（隐藏原生控件，用 JS 实现精简控制逻辑）
实际调试建议
开发时建议按以下顺序验证效果：
- 确认浏览器为 Chromium 内核（Chrome / Edge 最新版）
- 检查是否同时设置了
controls属性 - 在 DevTools 中查看
<video></video>元素的渲染控件栏变化 - 避免与其他属性冲突（如
disablePictureInPicture或webkit-playsinline一般不影响 controlsList，但需单独设置）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
