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 Boot中Starter是什么
比如我们要在Spring Boot中引入Web MVC的支持时,我们通常会引入这个模块spring-boot-starter-web,而这个模块如果解压包出来会发现里面什么都没有,只定义了一些POM依 ...
- Qt通过ODBC连接SQL Server2008实践总结
Qt连接数据库的方式很多,这里说明一种最常用也是最实用的方式,因为这种方式在Windows上开发程序使用起来非常方便,并且也是远程连接数据库所需要用到的方式. 前提工作: 在Win7下安装了SQL S ...
- ERROR - Undefined placeholders found in template:
今天发现了一个BUG,在引用其他的包的的时候报错: ERROR - Undefined placeholders found in template: - Template: META-INF/aut ...
- 8个很实用的在线工具来提高你的Web设计和开发能力
近期在网上看到一张帖子感觉不错.只是是英文版的今天闲着没事锻炼一下英语能力分享给大家看看! 原文地址:http://webdesignledger.com/tools/8-useful-online- ...
- 关于sendtoback()和bringtofront() 的理解
如下的代码: button2.Dock = DockStyle.Top; button1.SendToBack(); button1.Dock = DockStyle.Top; button3.Doc ...
- Percona-XtraBackup系列二:备份恢复
#在备份较大数据量的时候推荐xtrabackup,这个工具比mysqldump要快很多. 一.Xtrabackup介绍 1,Xtrabackup是什么 Xtrabackup是一个对InnoDB做数据备 ...
- 〖Android〗依据资源信息,Mock Android资源
#!/bin/bash - #=============================================================================== # # F ...
- Ubuntu18.04使用f3probe检测U盘实际容量
项目主页 https://fight-flash-fraud.readthedocs.io/ 使用f3probe 能快速检测出被测U盘的实际容量, 命令 $ sudo f3probe --destru ...
- OpenWRT/LEDE长期运行记录截图
哈哈, 发图留念. 待会儿要把它换到别处去了. 在Newifi Y1上稳定运行了95天的自编译OpenWrt, Y1这个型号的特点是5G信号强度比2.4G的强 Update 2017-11-27 在W ...
- OpenCV 数字验证码识别
更新后代码下载链接在此! !! 点我下载 本文针对OpenCv入门人士.由于我也不是专门做图像的,仅仅是为了完毕一次模式识别的小作业. 主要完毕的功能就是自己主动识别图片中的数字.图片包含正常图片,有 ...