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是 ...
随机推荐
- iOS 获取设备型号 ip6更新
//获得设备型号 + (NSString *)getCurrentDeviceModel:(UIViewController *)controller { ]; size_t len; char *m ...
- FIS前端集成解决方案
FIS前端集成解决方案-文档结构 什么是FIS 部署FIS FIS基本使用 模块定义 加载方式 调用Tangram 2.0 FIS开发实例 --附件下载-- 什么是FIS FIS提供了一套贯穿开发流程 ...
- LintCode: Combination Sum
一个数可以使用多次 图: 节点:x(当前的和,当前要考虑的数a[i]) 边:x-> y1(当前的和,下一个要考虑的数a[i+1]) y2(当前的和+a[i],下一个要考虑的数a[i+1]) BF ...
- 第六周 Word目录和索引
第六周 Word目录和索引 教学时间 2013-4-2 教学课时 2 教案序号 5 教学目标 能正确使用索引.目录等 教学过程: 复习提问 1.脚注和尾注的区别是什么?2.如何插入脚注和尾注?3.如何 ...
- 【转】Android Studio开发应用桌面出现两个或多个图标
原文链接:http://blog.csdn.net/jia635/article/details/78259699 解决办法: 查找的是不是自己的AndroidManifest中 多个Activity ...
- 算法笔记_214:第六届蓝桥杯软件类校赛真题(Java语言A组)
目录 1 题目一 2 题目二 3 题目三 4 题目四 5 题目五 6 题目六 7 题目七 前言:以下代码仅供参考,若有错误欢迎指正哦~ 1 题目一 一个串的子串是指该串的一个连续的局部.如果不要求连续 ...
- java 加密
加密.大体上分为双向加密和单向加密,而双向加密又分为对称加密和非对称加密. 双向加密大体意思就是明文加密后形成密文,能够通过算法还原成明文. 单向加密仅仅是对信息进行了摘要计算,不能通过算法生成明文. ...
- 朴素贝叶斯分类器(Naive Bayes)
1. 贝叶斯定理 如果有两个事件,事件A和事件B.已知事件A发生的概率为p(A),事件B发生的概率为P(B),事件A发生的前提下.事件B发生的概率为p(B|A),事件B发生的前提下.事件A发生的概率为 ...
- excel 如何快速实现绝对引用
当函数输入完成并框选数据区域后,变成如上效果时,按“F4键”即可
- Ubuntu18.04使用adb和tcpdump对android设备进行网络调试
准备工作 1. Android设备需要root 2. 在 https://www.androidtcpdump.com/ 下载适用于Android的tcpdump可执行文件 3. 本地安装 andro ...