html5 audio组件禁止下载

参考链接:https://wdd.js.org/audio-hide-download-icon.html

1. controlsList=”nodownload”
// 这个方法只支持 Chrome 58+, 低于该版本的是没有无法隐藏的

<audio src="/record/test.wav" controls="controls" controlsList="nodownload"></audio>

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

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

2. css方式来隐藏

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


3. 即使让下载按钮隐藏了,如何禁止右键下载?
// 给audio标签禁止右键,来禁止下载

<audio src="/record/test.wav" controls="controls" controlsList="nodownload" oncontextmenu="return false"></audio>

补充说明:

经测试,firefox(版本55.0.3)天然的不显示下载按钮。两者对禁用右键下载的支持倒是一致的。

原文地址:https://www.cnblogs.com/yoyotl/p/8626178.html