码迷,mamicode.com
首页 > Web开发 > 详细

html中如何移除video下载按钮

时间:2021-02-06 11:55:17      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:script   dde   var   function   方法   idt   ext   UNC   segment   

当我们使用原生的audio标签时,可以看到如下的效果。

技术图片 

 那么如何让下载按钮隐藏掉呢?

1. controlsList="nodownload"

// 这个方法只支持 Chrome 58+, 低于该版本的是没有无法隐藏的
<audio src="/i/horse.ogg" controls="controls" controlsList="nodownload">
    Your browser does not support the audio element.
</audio>

controlsList属性只兼容Chrome 58+以上,具体可以参考controlslist.html ,controlsList在线例子

  • nodownload: 不要下载
  • nofullscreen: 不要全屏
  • noremoteplayback: 不要远程回放

2. css方式来隐藏

// 这个方式兼容所有版本的谷歌浏览器
audio::-webkit-media-controls {
    overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

3. 即使让下载按钮隐藏了,如何禁止右键下载?

// 给audio标签禁止右键,来禁止下载
<audio src="/i/horse.ogg" controls="controls" controlsList="nodownload" oncontextmenu="return false">
    Your browser does not support the audio element.
</audio>

4. 第三方插件: audiojs

项目地址: https://github.com/kolber/aud...
优点: 简单,无依赖
缺点:异步插入的audio标签,每次还是需要重新调用audiojs.createAll()方法来重新实例化

// 1.
<script src="/audiojs/audio.js"></script>

// 2.
<script>
   audiojs.events.ready(function() {
     var as = audiojs.createAll();
   });
</script>

 

参考:https://segmentfault.com/a/1190000009737051

           https://www.cnblogs.com/johnv/p/9578348.html

html中如何移除video下载按钮

标签:script   dde   var   function   方法   idt   ext   UNC   segment   

原文地址:https://www.cnblogs.com/vickylinj/p/14379157.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!