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;
}