video标签默认不显示下载按钮,启用controls后chrome/edge默认显示下载选项(三点菜单中),firefox则不提供;controlslist="nodownload"仅对chromium 105+有效,firefox忽略;彻底隐藏需自定义控件或额外提供download链接。

video 标签默认不显示下载按钮,但加了 controls 就可能显示
浏览器是否显示下载按钮,取决于是否启用 controls 属性,以及是否显式禁用下载功能。Chrome、Edge 等基于 Chromium 的浏览器在有 controls 时,默认会显示下载按钮(三个点菜单里含“下载”),Firefox 则默认不提供该选项。关键不是“隐藏”,而是“不让它出现”。
-
controls是开关:没它,整个控制栏都没;有它,就按浏览器策略决定是否含下载入口 - 单纯加
controlslist="nodownload"只对 Chromium 有效(Chrome/Edge 105+),Firefox 忽略该属性 -
webkit-playsinline或preload等其他属性不影响下载按钮显示
用 controlslist="nodownload" 禁用 Chromium 下载按钮
这是目前最直接的 HTML 层面控制方式,但必须配合 controls 使用,否则控件本身就不显示,也谈不上禁用下载。
<video controls controlslist="nodownload" src="demo.mp4"></video>
- 仅作用于 Chromium 内核浏览器(Chrome ≥105、Edge ≥105),旧版本或 Safari 不支持
- 该属性不被 W3C 标准收录,属于实验性属性,
controlslist还支持nofullscreen、nofullscreen(注意拼写差异)、nomuting,但兼容性更差 - 如果同时需要隐藏全屏按钮,可写成
controlslist="nodownload nofullscreen",但 Firefox 仍会显示全屏按钮
彻底隐藏下载入口:不用 controls,自己实现自定义控件
当兼容性要求高,或需完全掌控 UI 时,放弃原生控件是唯一可靠方案。此时下载按钮自然不存在,但你得手动实现播放/暂停/音量/进度等逻辑。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
- 移除
controls属性,用 JS 操作play()、pause()、currentTime、volume等 API - 监听
loadedmetadata和timeupdate来更新进度条,避免卡顿或不同步 - 注意移动端:iOS Safari 要求用户手势触发
play(),且不支持自动播放带声音的视频 - 若仍想提供下载能力,可额外加一个独立的
@#@#@#@#@#@#@#@#@#@0链接,它不受controlslist影响
为什么 CSS display: none 隐藏下载按钮不可靠
有人尝试用 CSS 选择器隐藏三个点按钮里的下载项,比如 video::-webkit-media-controls-overlay-panel 或伪元素,这条路走不通。
- 浏览器未暴露稳定、跨版本的伪元素用于定位“下载”菜单项,CSS 无法精确命中
- 部分老教程提到的
::-internal-media-controls-download-button已被 Chromium 移除(2022 年起) - 即使临时生效,一次浏览器更新就失效,且无法覆盖右键上下文菜单里的“另存为”选项
真正可控的边界只在:用原生控件就接受它的行为,要精细控制就得自己造轮子。别在 CSS 上浪费调试时间。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










