欢迎光临一流素材网,免积分免费素材下载!
当前位置:首页 > 教程 > HTML+CSS>HTML5

HTML 5 audio音频禁止下载

所属栏目:HTML5更新时间:2021-01-22 来源:洞香春 原作者:洞香春 发布:deepdfhy浏览:0

免费开源可商用的PHP万能建站程序-DiYunCMS(帝云CMS)

HTML 5 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+以上。

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/audiojs
优点: 简单,无依赖
缺点:异步插入的audio标签,每次还是需要重新调用audiojs.createAll()方法来重新实例化

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

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




标签: audio
收藏 0 有帮助 0 没帮助 0 打赏 0
给个评价吧
百度云加速250x250