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是 ...
随机推荐
- 【转】Spring项目启动报"Could not resolve placeholder"解决方法
问题的起因: 除去properites文件路径错误.拼写错误外,出现"Could not resolve placeholder"很有可能是使用了多个PropertyPlaceho ...
- javascript获取和设置URL中的参数
勘误版 function getQuery(key, url) { url = url || window.location.href; if (url.indexOf('#') !== -1) ur ...
- js - object.assign 以及浅、深拷贝
浅(引用)拷贝:共用同一内存地址,你改值我也变 譬如常用的对象赋值操作 深拷贝:深拷贝即创建新的内存地址保存值(互不影响) 譬如以下 const shallBasicCopy = obj => ...
- Java 基础【16】 文件(文件夹) 创建和删除
使用 java.io.file 创建文件(文件夹),算是 java 最基础的知识,但实战项目中还是需要知晓细节. 比如 File 类中的 mkdir() 和 mkdirs() 的区别. JDK API ...
- Java多线程之锁优化策略
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6561264.html 锁的优化策略 编码过程中可采取的锁优化的思路有以下几种: 1:减少锁持有时间 例如:对 ...
- 关于0xFFFFFFFF和alpha,温故而知新
做图像处理都好多年了,今天随手做个小画板的时候,发现一个挺有趣的小坑.而其实这个小坑,以前也坑过自己,不过太久没处理了,又踩到坑里了. 先来看看:0xFFFFFFFF>>24 这个结果是什 ...
- 从join on和where执行顺序认识T-SQL查询处理执行顺序
先从一例子看join on 和 where执行结果的不同 CREATE TABLE "SCOTT"."A" ( "PERSON_ID" ) ...
- django之创建站点之基本流程
创建工程: 1.在D盘下创建一个文件夹名为djangoweb,切换到文件夹所在目录 C:\Administrator>d: D:\>cd d:\djangoweb 2.创建工程(成功没有提 ...
- mysql中日志的配置与分析
默认情况下,如果日志没有配置,则只记录错误日志,记录到syslog,配置文件 /etc/mysql/conf.d/mysqld_safe_syslog.cnf (ubuntu下) [mysqld_sa ...
- java非web应用修改 properties/xml配置文件后,无需重启应用即可生效---自动加载
实现时主要使用Commons-Configuration.jar包,还需要commons-lang,disgestor,beanutils,collections等, package propFile ...