禁用Google Chrome的下载按钮？

Question

谷歌浏览器现在附带一个下载按钮,用于播放只是嵌入视频的视频(即非MSE):

我很难找到Chrome实施<video>标签的任何文档.有没有人知道是否有办法 - 禁用"控件"并创建自己的视频播放器控件 - 禁用此功能？

我意识到,如果显示,下载视频已经很容易,我只想禁用该功能作为控件的一部分出现.

谢谢!

Answer 1

或者你可以简单地添加nodownload在controlsList

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

Answer 2

您可以通过激活阴影DOM来检查本机Chrome视频播放器的控件 Settings|Preferences -> Elements -> Show user agent shadow DOM

之后,您可以检查播放器按钮.

现在问题是由于某种原因无法通过CSS访问下载按钮.

video::-internal-media-controls-download-button {
    display:none;
}

不行.甚至选择前面的按钮并使用+或~不使用它的邻居.

我们发现的唯一方法是通过给控制面板增加宽度并制作外壳,将按钮从可视区域轻推出来 overflow: hidden

video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

我希望谷歌能尽快解决这个问题,因为大多数内容提供商都不会满意这个...

Answer 3

Demmongonis解决方案确实有效,但要注意它可能会导致不必要的结果.

Android/Chrome有时候,取决于我猜的视频和其他因素,在下载按钮右侧添加了按钮.即铸造按钮(无法选择它).它将使下载按钮保持可见,并使最后一个按钮隐藏(转换按钮)

更新

现在可以使用controlsList属性隐藏下载按钮:

<video controlsList="nodownload" ... />

Answer 4

是的,现在可以这样做,至少在写作时,您可以使用以下controlsList属性:

<video controls controlsList="nodownload">
  <source data-src="movie.mp4">
</video>

这似乎是在Chrome 58中引入的,其文档可在此处找到:https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

开发人员现在可以自定义媒体控件,例如下载,全屏和远程播放按钮.HTML中的用法:

<video controls controlsList="nofullscreen nodownload noremote foobar"></video>

甚至还有一个官方样本页面:https://googlechrome.github.io/samples/media/controlslist.html