// 这个方法只支持 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. shell编程之 ()[] {}

    shell脚本中各种括号的区别以及用法 2018年08月19日 14:55:33 M_QiJunChao 阅读数:273   最近学到了shell脚本编程,觉得脚本中的不同括号有不同的用处,以及有些括 ...

  2. Nginx数据结构之散列表

    1. 散列表(即哈希表概念) 散列表是根据元素的关键码值而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录, 以加快查找速度.这个映射函数 f 叫做散列方法,存放记录的数 ...

  3. Appnium安装

    Refer to https://blog.csdn.net/xgh1951/article/details/85124327

  4. POCO C++库笔记 【1.Foundation基础库的结构】

    Foundation库是POCO的基础库,提供了一些C++编程中常用的功能的抽象封装,主要由以下这些部分组成: Core  -- 这部分除了建立跨平台库的基础头文件外,最有意义的部分是分装了原子计数的 ...

  5. mybatis之动态SQL操作之更新

    1)  更新条件不确定,需要根据情况产生SQL语法,这种情况叫动态SQL /** * 持久层*/ public class StudentDao { /** * 动态SQL--更新 */ public ...

  6. hibernate关联映射之一对多&多对一

    package loaderman.b_one2Many; import java.util.HashSet; import java.util.Set; public class Dept { pr ...

  7. pytest+allure展示环境信息

    allure展示环境信息 要将信息添加到Environment小部件,只需在生成报告之前在目录中创建environment.properties(或environment.xml)文件allure-r ...

  8. java1.7新特性:try-with-resources

    转载:https://blog.csdn.net/fanxiaobin577328725/article/details/53067163 首先看代码: import org.junit.Test; ...

  9. Python 的内置函数__import__

    我们知道import语句是用来导入外部模块的,当然还有from...import...也可以,但是其实import实际上是使用builtin函数__import__来工作的.     在一些程序中,我 ...

  10. Pytorch-属性统计

    引言 本篇介绍Pytorch属性统计的几种方式. 统计属性 求值或位置 norm mean sum prod max, min, argmin, argmax kthvalue, topk norm ...