Chrome浏览器video样式控制-隐藏下载按钮

Chrome浏览器在升级之后 video的样式和之前是不一样的，如果使用原生video的话可能会有影响，实际项目中最好使用第三方插件以保证video在所有浏览器都有统一的样式

一、如何隐藏video的下载按钮

　　1. 在Chrome58以上的版本中使用 video元素的  controlsList API :https://googlechrome.github.io/samples/media/controlslist.html   代码如下：

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

　　2. 在Chrome58以下的版本中使用css去控制，简单来说就是将下载按钮挤出可见范围，这样就可以变相的认为按钮被隐藏了，代码如下：

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

　　

 

转载于:https://www.cnblogs.com/zhangruiqi/p/9263742.html