谷歌浏览器：audio如何隐藏下载按钮

MartinHan 发布于2019-08-21 11:43 / 1789人阅读

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

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

1. controlsList="nodownload"

// 这个方法只支持 Chrome 58+， 低于该版本的是没有无法隐藏的

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标签禁止右键，来禁止下载

4. 第三方插件: audiojs

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

// 1.


// 2.

效果图：

5 audio相关问题以及解决方案

关于动态生成的mp3在audio标签无法拖动的问题: (audio断点续传)

6 参考文献

https://stackoverflow.com/que...

https://googlechrome.github.i...

云服务器 GPU云服务器浏览器如何隐藏webrtc 谷歌浏览器如何开启webrtc 谷歌浏览器如何关闭webrtc 谷歌浏览器如何禁用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87041.html

Audio: 如果你愿意一层一层剥开我的心

摘要：基本用法属性目前只支持你可以看出他们在里表现的差异关于标签支持的音频类型，可以参考常用属性音频流文件就绪后是否自动播放无需预加载只需要加载元数据，例如音频时长，文件大小等。我觉得DOM就好像是元素周期表里的元素，JS就好像是实验器材，通过各种化学反应，产生各种魔术。 showImg(https://segmentfault.com/img/bVO9vK?w=1440&h=814); ...

wangjuntytl 2019-08-20 17:14 评论0 收藏0
用Vue搭建一个应用盒子（三）：音乐播放器

摘要：组件结构接着我们就该搭建这个播放器的组件了。总的原理是首先获取音频的持续时间，然后通过一个定时器，不断更新显示时间，播放完成时，计时器停止。这个页面比较简单，播放器标签，绑定了事件，即播放完成后执行。这个播放器的开发历时2个多月，并不是说它有多复杂，相反它的功能还非常不完善，仅具雏形。之所以磨磨蹭蹭这么久，一是因为拖延，二也是实习公司项目太紧。8月底结束实习前写完了样式，之后在家空闲...

appetizerio 2019-08-26 11:33 评论0 收藏0
浏览器兼容问题

摘要：一什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。条件注释最初于微软的浏览器中出现，并且直至均支持。一、什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都...

wenshi11019 2019-08-26 13:57 评论0 收藏0