隐藏video下载按钮

 

 

现在网页中涉及到视频时我们一般会选择用h5新增的video标签，神烦的是系统会自动给video标签加上一些我们不需要的按钮，比如下载按钮。在很多情况下，点击下载按钮网页会直接崩溃掉，所以提供下隐藏下载按钮的方法

 

1. css方式

这种方式有个弊端，视频宽度不同时控制器加减的尺寸也不同，要具体调节，还有就是播放图标会向右偏移。页面不美观

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

2. 其实还有一种方式，更简单。 

controlslist=”nodownload” 去掉下载按钮 
controlslist=”nofullscreen“ 去掉全部，只显示播放进度

<video src="xxx.mp4" controls="controls" controlslist="nodownload"></video>