HTML5 audio组件禁止下载

  • A+
所属分类：前端

当使用原生的audio标签时，默认效果为【播放按钮 - 进度条 - 音量 - 下载】。有时需要隐藏下载按钮，主要包括以下3种方式。

添加controlsList属性

这个方法只支持Chrome 58+，低于该版本无法隐藏。nodownload: 不要下载；nofullscreen: 不要全屏；noremoteplayback: 不要远程回放。

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

css方式来隐藏

audio::-webkit-media-controls {
	overflow: hidden !important;
}
audio::-webkit-media-controls-enclosure {
	width: calc(100% + 32px);
	margin-left: auto;
}

禁止右键下载

<audio src="/record/test.wav" controls="controls" controlsList="nodownload" οncοntextmenu="return false;"></audio>
weinxin
独角兽驿站
公众号

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: