video之去除下载按钮及禁用右键下载

前言

最近在开发群里发现有人问这个问题，video在最新版谷歌浏览器中出现了下载按钮，那么问题如何解决？经测试，总结如下。

去除下载按钮

video是HTML5的新增元素，为我们带来了很大的便利，但是有时候默认的样式并不是我们想要的结果，比如download按钮的出现。

解决代码如下：

 video::-webkit-media-controls-enclosure {
   overflow:hidden;
 }
 video::-webkit-media-controls-panel {
   width: calc(100% + 30px); 
 }

代码中对控制块的长度进行加长（关于calc请看CSS3的calc()使用），通过overflow:hidden;隐藏掉了多于的部分，这里并没有直接去掉，而是隐藏掉了。

效果如下：

那么问题来了：

右键还是可以“视频另存为”。

禁用右键点击

/*jquery*/
$("video").on("contextmenu",function(){return false;});

注意这里对video元素禁用了右键点击，并不是对整个页面禁用这么粗暴。

总结

目前只发现了chrome浏览器中存在下载按钮，且在http协议下访问，file协议访问并不会出现下载按钮。