controlslist 是 html5 video 标签的布尔型属性，用于建议性隐藏下载、全屏等原生控制按钮，仅在 controls 存在时生效，chrome/edge 支持较好，firefox 不支持，无法替代服务端权限或 drm。

ControlsList 是 HTML5 <video></video> 标签的一个布尔型属性，用于**提示浏览器隐藏特定的原生控制按钮**（如下载、全屏、音量等），但它不是强制禁用，而是“建议性隐藏”——实际是否生效取决于浏览器支持情况和用户代理样式。

支持的值与作用

该属性接受空格分隔的字符串，常见可选值包括：

• nodownload：建议隐藏下载按钮（防止用户点击保存视频）
• nofullscreen：建议隐藏全屏按钮
• nofullscreen 和 nodownload 可同时使用
• 注意：noremoteplayback（禁用投屏）也受支持，但不属于视觉控件

基本用法示例

直接在 <video></video> 标签中添加 controlslist 属性：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

注意事项与局限性

这个属性有明显限制，需特别注意：

• 仅在 controls 属性存在时才起作用（即必须显示原生控件）
• Chrome 和 Edge 支持较好；Firefox 目前完全不支持 controlslist
• Safari 对 nodownload 支持有限，可能仍可通过右键另存为下载
• 它不能阻止开发者工具中查看网络请求、复制媒体 URL 或录屏等行为
• 无法替代服务端权限控制或 DRM 方案，仅适用于轻量级 UI 提示

更可靠的替代方案

若需真正限制下载或全屏，应结合其他手段：

• 移除 controls，用 JavaScript 自定义播放器 UI（隐藏下载/全屏入口）
• 服务端设置 Content-Disposition: inline 并禁用范围请求（影响体验，慎用）
• 对敏感内容启用 EME + DRM
• 监听 contextmenu 事件禁用右键（不推荐，影响可访问性）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！