More than code
Welcome to the website

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协议访问并不会出现下载按钮。

赞(0) 打赏
未经允许不得转载:李帅帅空间 » video之去除下载按钮及禁用右键下载

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏