chrome浏览器下video隐藏下载按钮

  • 时间:2018-05-24
  • 作者:佚名
  • 热度:5130

在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题。

虽然简介视频是非付费的,但也不希望会有下载按钮或者可以视频另存为,所以找到一个可以看上去没有下载功能的方法,做一下笔记。

1. 使用 video 元素的 ControlList API 

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

通过 ControList API,不仅可以通过设置 nodownload 来隐藏下载按钮,还可以设置 nofullscreen 隐藏全屏按钮, 以及noremoteplayback 等属性,具体的示例可以参考 github pages。该方案的优点是原生支持,不会产生bug,而且设置起来也是简单方便,不过由于 ControlList API 是从 Chrome 58+ 才开始引入的,所以对于低于 58 版本的 Chrome 只能通过方法2来隐藏了。

 

2. 通过 CSS 隐藏

通过 Settings|Preferences -> Elements -> Show user agent shadow DOM 打开 shadow DOM 开关后,可以通过 devtools 查看 video 元素的组成部分。

由此发现下载按钮的是通过 <input type="button" pseudo="-internal-media-controls-download-button" style=""> 呈现的,所以可以通过下述CSS将其隐藏:

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

 

但是很可惜,该方法并不起作用,猜想可能是Chrome的一个BUG,所以只能另辟蹊径,简单来说就是将下载按钮挤出可见范围,这样就可以变相的认为按钮被隐藏了,代码如下:

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



博主声明

1、本博客主要为原创文章,转载请注明出处。

2、部分文章来自网络,已注明出处,如有侵权请与本人联系。

3、如果文章内容有误,或者您有其他更好的意见、建议请给我留言,我会及时处理!