在react vue 原生 隐藏视频video控制台的下载按钮，禁止显示下载按钮 简单 通用

很久没登录博客了，今年一直在忙WebIM和WebRTC,比搬砖还累，还好最近缓过来了哈哈，开始分享这次的内容吧。

video标签加了'controls'后会有个下载按钮，并且下载的地址也默认指向了被处理过后的blob:播放源，这个按钮是无法下载的，去掉方法有几种， 我的方式是在componentDidMount周期里操作dom去改变属性， VUE的话可以在mounted里操作 ，

方式1：

this.refs.video.controlsList = "nodownload"; 

原生写法： 
document.getElementById('videoId').controlsList = "nodownload" ;

方式2 ：（百度上很多人推荐的改变样式的方法 ，我这里使用了没有效果）

video::-internal-media-controls-download-button {
  display:none !important;
}
video::-webkit-media-controls-enclosure {
  overflow:hidden !important;
}
video::-webkit-media-controls-panel {
  width: calc(100% + 30px);
}

方式3：

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

不知道为啥，我这里加这个属性就给报错，也不确定react框架里能不能这么使用 ，提示阅读地址还访问不了

所以我用简单粗暴的方法1来解决吧。