HTML中video标签controlslist属性怎么隐藏视频播放器的下载按钮-html教程-PHP中文网

controlslist 属性支持 nodownload、nofullscreen、noremoteplayback 三个值，仅 nodownload 可隐藏下载按钮；firefox 125+ 和 chrome/edge 支持，safari 完全不支持，动态设置或第三方播放器框架下可能失效。

html中video标签controlslist属性怎么隐藏视频播放器的下载按钮

controlslist 属性支持哪些值

controlslist 是 <video></video> 标签的布尔属性，用于控制原生控件面板中哪些按钮可见。它本身不接受 true/false，而是接收空格分隔的字符串列表，每个值代表禁用某项功能。目前主流浏览器（Chrome、Edge、Firefox 125+）支持的合法值有：nodownload、nofullscreen、noremoteplayback。其中只有 nodownload 能隐藏下载按钮。

为什么加了 controlslist="nodownload" 还是能看到下载按钮

常见原因不是写法错，而是浏览器兼容性或 DOM 加载时机问题：

Firefox 在 124 及更早版本完全忽略 controlslist，必须升级到 125+ 才支持 nodownload
Safari 不支持 controlslist 任何值，该属性在 Safari 中被静默忽略
如果视频是通过 JavaScript 动态插入 DOM 的，需确保 controlslist 属性在 <video></video> 元素创建时就已存在，而不是后续用 setAttribute 补上（部分浏览器不响应动态设置）
某些 CDN 或播放器框架（如 video.js）会接管原生控件，此时 controlslist 失效，因为实际渲染的不是原生控件

正确写法和最小验证示例

直接在 HTML 中声明最可靠：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

<video controls controlslist="nodownload"><source src="example.mp4" type="video/mp4"></source></video>

注意几点：

controls 属性必须存在，否则控件面板根本不显示，controlslist 就无意义
controlslist 值必须是纯字符串，不能带引号内的空格（比如 "no download" 错，"nodownload" 对）
多个禁用项用空格连接，如 controlslist="nodownload nofullscreen"
不要写成 controlslist="nodownload=true" 或 :nodownload，这是无效语法

替代方案：当 controlslist 不生效时怎么办

如果目标环境包含 Safari 或旧版 Firefox，仅靠 controlslist 无法隐藏下载按钮，就得绕过原生控件：

移除 controls 属性，用自定义 UI + HTMLMediaElement API 控制播放/暂停/音量等
用 CSS 隐藏原生下载按钮（不推荐）：Chrome 中可尝试 video::-webkit-media-controls-overlay-panel button[aria-label="Download"] { display: none; }，但该选择器非标准、易失效且不跨浏览器
服务端禁用 MP4 文件的 Content-Disposition: attachment 响应头，防止右键另存为——但这不影响控件上的下载按钮，只影响右键菜单

真正可靠的隐藏，取决于你能否放弃 Safari 支持，或者愿意投入开发成本做自定义控件。原生 controlslist 的能力边界很窄，别指望它解决所有场景。