当前位置:主页 >> html5 >> 正文
audio如何隐藏下载按钮
阅读:112 输入:2018-06-30 02:18:39

1. controlsList="nodownload"

// 这个方法只支持 Chrome 58+, 低于该版本的是没有无法隐藏的
<audio src="/i/horse.ogg" controls="controls" ontrolsList="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>