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 {
width: calc(% + 32px);
margin-left: auto;
}
3. 即使让下载按钮隐藏了,如何禁止右键下载?
// 给audio标签禁止右键,来禁止下载
<audio src="/record/test.wav" controls="controls" controlsList="nodownload" oncontextmenu="return false"></audio>
补充说明:
经测试,firefox(版本55.0.3)天然的不显示下载按钮。两者对禁用右键下载的支持倒是一致的。
html5 audio组件禁止下载的更多相关文章
- [jPlayer] HTML5 Audio & Video for jQuery
---------------------------------------------------------------------------------------------------- ...
- Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!
继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- 开大你的音响,感受HTML5 Audio API带来的视听盛宴
话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- 谷歌浏览器:audio如何隐藏下载按钮
当我们使用原生的audio标签时,可以看到如下的效果. 那么如何让下载按钮隐藏掉呢? 1. controlsList="nodownload" // 这个方法只支持 Chrome ...
- HTML5 audio 如何实现播放多个MP3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...
- 7个效果震憾的HTML5应用组件
在HTML5的世界里,任何文本.图像都可以变得令人难以想象,很多HTML5应用也都已经随着浏览器的升级而变得运行飞速,而且兼容性也越来越好.下面为大家介绍7款效果震憾的HTML5应用组件,HTML5是 ...
随机推荐
- apache 反向代理的时候,通过域名访问是,出现跳转到ip或者无权访问的情况
解决方法很简单,在配置反向代理的时候加上一行: ProxyPreserveHost On 例如:ProxyPass / http://202.112.0.1/ProxyPassReverse / ht ...
- NSMutableURLRequest Http 请求 同步 异步
#pragma mark get country code//同步 -(void)getFKjsonCountryCode { dispatch_async(dispatch_get_global_q ...
- ANT task之Junit、JunitReport
一.ANT任务之Junit: 学习ANT其实主要是学习ANT的task,ANT众多task中有一个Testing Tasks,它下面有两个任务:Junit和JunitReport,主要用来进行单元测试 ...
- php理解变量的作用域
作用域是指在一个脚本中某个变量可以使用或可见的范围,php具有6项基本的作用域规则. 1.内置超级全局变量可以在脚本的任何地方使用和可见. 2.常量,一旦被声明,将可以在全局可见:也就是说,它们在函数 ...
- Go语言中异常处理painc()和recover()的用法
Go语言中异常处理painc()和recover()的用法 1.Painc用法是:用于抛出错误.Recover()用法是:将Recover()写在defer中,并且在可能发生panic的地方之前,先调 ...
- Win7安装golang开发环境--备忘录
首次接触golang,非常多东西不熟悉,Git也没有安装. 1 安装golang 1.1 下载golang 我是在Golang中国的下载频道下载的golang1.6.链接例如以下: http://ww ...
- Flash Actionscript AS3 渐变透明 mask遮罩
把图片变成渐变透明(左图是效果图,右图是原图) var a:Sprite = new Sprite(); a.graphics.beginGradientFill(GradientType.LI ...
- django之创建第3个项目:编写第一个模板文件
1.django结构 2.在站点blog下创建templates文件夹,专门用于存放模板文件 3.在templates文件夹下创建index.html文件 #index.html <!DOCTY ...
- mingw 构建 Geos
简述 在做某个小程序时候用到了QT,而用的Qt是mingw版本的,所以使用mingw构建了一下geos库. 1.准备工作 首先需要先安装好mingw,这里直接使用http://www.mingw-w6 ...
- Dubbo框架探讨(转)
1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...