// 这个方法只支持 Chrome 58+, 低于该版本的是没有无法隐藏的
<audio src="/i/horse.ogg" controls="controls" controlsList="nodownload">
Your browser does not support the audio element.
</audio>

controlsList属性只兼容Chrome 58+以上,具体可以参考controlslist.html ,controlsList在线例子

nodownload: 不要下载
nofullscreen: 不要全屏
noremoteplayback: 不要远程回放

第二种方法:css方式来隐藏

// 这个方式兼容所有版本的谷歌浏览器
audio::-webkit-media-controls {
overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
width: calc(100% + 32px);
margin-left: auto;
}

禁止右键

// 给audio标签禁止右键,来禁止下载
<audio src="/i/horse.ogg" controls="controls" controlsList="nodownload" oncontextmenu="return false">
Your browser does not support the audio element.
</audio>

audio隐藏下载按钮的更多相关文章

  1. 谷歌浏览器:audio如何隐藏下载按钮

    当我们使用原生的audio标签时,可以看到如下的效果. 那么如何让下载按钮隐藏掉呢? 1. controlsList="nodownload" // 这个方法只支持 Chrome ...

  2. html页面原生video标签隐藏下载按钮

    在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题. 虽然简介视频是非付费的,但也不希望会有下载按钮或者 ...

  3. Chrome浏览器video样式控制-隐藏下载按钮

    Chrome浏览器在升级之后 video的样式和之前是不一样的,如果使用原生video的话可能会有影响,实际项目中最好使用第三方插件以保证video在所有浏览器都有统一的样式 一.如何隐藏video的 ...

  4. Cannot read property 'nodeType' of null; audio元素默认样式下载按钮

    1.chrome-->console抛出如下错误: Uncaught TypeError: Cannot read property 'nodeType' of null 错误原因:从stack ...

  5. 如何隐藏 video 元素的下载按钮

    1. 使用 video 元素的 ControlList API <video controls controlsList="nodownload"></video ...

  6. 隐藏video标签的下载按钮

    问题: 使用video标签时,有些浏览器会显示视频的下载按钮,而这并不是我们需要的功能,必须想办法去掉. 解决方法: 使用下面的css可以达到隐藏下载按钮的效果,但是点击下载的位置,还是能出现开始下载 ...

  7. h5的video下载按钮如何隐藏

    h5的video下载按钮在部分手机系统上是不可用的,想要把这个按钮屏蔽掉,可苦于没有像屏蔽全屏按钮那样的伪类video::-webkit-media-controls-fullscreen-butto ...

  8. CSS3 Transitions属性打造动画的下载按钮特效

    一个网站的下载按钮应尽量吸引读者的注意. 这意味着网页设计师应该非常重视文件的下载界面.一个页面这么多的文件,如图片,视频和插件可以通过直接HTTP下载共享.许多免费网站甚至发布图标集和PSD文件供用 ...

  9. html中如何移除video下载按钮

    我发现部分安卓手机使用video标签播放视频的时候会自带一个下载按钮,一般产品大多都不需要这一功能,那如何屏蔽下载按钮呢?有下面两种,请一定使用第一种方式,使用css控制会有兼容性问题,建议不要使用这 ...

随机推荐

  1. Java虚拟机与平台无关性

    概述 代码编译的结果从本地机器码转变为字节码,是存储格式发展的一小步,却是编程语言发展的一大步. --<深入理解Java虚拟机>(从这里可以看到,字节码是一种文件格式) 我们都知道计算机只 ...

  2. IntelliJ IDEA-配置文件位置

    关于配置文件的位置 一旦开始使用IDEA之后,就需要做很多的配置相关工作,使得IDEA越来越符合你的个人习惯,让你使用起来得心应手.而这些配置信息,都保存在C盘,比如我的就会默认保存在如图所示的位置 ...

  3. redis事务机制和分布式锁

    Redis事务机制 严格意义来讲,Redis的事务和我们理解的传统数据库(如mysql)的事务是不一样的:Redis的事务实质上是命令的集合,在一个事务中要么所有命令都被执行,要么所有事物都不执行.  ...

  4. 性能分析 | Linux 内存占用分析

    这篇博客主要介绍 linux 环境下,查看内存占用的两种方式:使用 ps,top等命令:查看/proc/[pid]/下的文件.文章简要介绍了命令的使用方法与一些参数意义,同时对/proc/[pid]/ ...

  5. ubuntu16.04下如何安装mkimage工具?

    答: sudo apt-get install u-boot-tools -y

  6. Android视频直播全屏实现

    /** * 添加直播组件 */ @SuppressLint("JavascriptInterface") private void addPlayerLive(final Subj ...

  7. spring boot系列(六)spring boot 配置mybatis(xml简化版)

    orm框架的本质是简化编程中操作数据库的编码,发展到现在基本上就剩两家了,一个是宣称可以不用写一句SQL的hibernate,一个是可以灵活调试动态sql的mybatis,两者各有特点,在企业级系统开 ...

  8. Android 单元测试学习计划

    网上查了一下Android单元测试相关的知识点,总结了一个学习步骤: 1. 什么是单元测试2. 单元测试正反面: 2.1. 重要性 2.2. 缺陷 2.3. 策略3. 单元测试的基础知识: 3.1. ...

  9. react 添加 react-redux 基本用法

    安装 yarn add react-redux 创建文件.文件夹 |- redux |- actions.js |- reducer.js |- store.js actions.js export ...

  10. 华为服务器IBMC批量巡检代码

    selenium需要下载Chrome驱动webdriver,具体下载的版本根据自己的谷歌浏览器版本进行下载,然后将下载好的驱动webdriver放到自己python解释器同级目录中即可,下载地址htt ...