// 这个方法只支持 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. 2.RabbitMq-持久化

    RabbitMq-消息持久化 问题:怎样保证消息不因生产者gg而丢失我们知道了如何在消费者的角度保证消息不丢失,但如果生产者gg了呢,消息同样会丢失,生产者gg后会默认丢弃所有的消息,除非告诉它某些消 ...

  2. JS 小脚本汇聚

    根据文件length展示文件大小 if (bytes === 0) return '0 B'; var k = 1024, sizes = ['B', 'KB', 'MB', 'GB', 'TB', ...

  3. python安装appium模块

    (base) localhost:~ ligaijiang$ pip3 install Appium-Python-Client Collecting Appium-Python-Client Dow ...

  4. 3.AOP中的IntroductionAdvisor

    上篇中的自定义Advisor是实现的AbstractPointcutAdvisor,Advisor其实还有一个接口级别的IntroductionAdvisor                     ...

  5. 解决ssh连接超时(ssh timeout)的方法

    echo export TMOUT=1000000 >> /root/.bash_profile (可设置为-1为永不超时) cat /root/.bash_profile source ...

  6. 02 MySQL之数据表的基本操作

    01-创建数据表 # 切换数据库 use test_db; # 创建数据表 语法规则如下: create table 表名 ( 字段名1, 数据类型 [列级别约束条件] [默认值], 字段名2, 数据 ...

  7. PHP md5() 函数

    PHP String 函数 实例 计算字符串 "Hello" 的 MD5 散列: <?php $str = "Shanghai"; echo md5($s ...

  8. 重置node节点

    删除node节点 删除通过csr请求后产生的所有文件和证书 [root@lab1 ~]# rm -rf /etc/kubernetes/kubelet.conf [root@lab1 ~]# rm - ...

  9. public static void main(String[] args) 是什么意思?

    public static void main(String[] args),是java程序的入口地址,java虚拟机运行程序的时候首先找的就是main方法. 一.这里要对main函数讲解一下,参数S ...

  10. 安装heat

    在控制节点上执行 controller-heat(){mysql -uroot -p${MYSQL_PASSWD} << EOF DROP DATABASE IF EXISTS heat; ...