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

第一种方式,通过原生方式 nodownload in controlsList 控制button显示,audio标签也适用

<video width="400" height="300" controls controlsList="nodownload">
<source data-src="test.ogg" type="video/mp4">
</video>

另一种方式通过css控制video标签的外观(坑一踩,有兼容问题,不要使用!!

video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px); }

html中如何移除video下载按钮的更多相关文章

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

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

  2. php中点击下载按钮后待下载文件被清空

    在php中设置了文件下载,下载按钮使用表单的方式来提交 <form method="post" class="form-inline" role=&quo ...

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

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

  4. 去掉谷歌浏览器 video标签下的下载按钮

    一.判断浏览器版本(区分谷歌和360浏览器) function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字 ...

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

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

  6. 【HTML5】video 标签禁用自带的下载按钮

    h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 <style type="text/css"> video::-internal-me ...

  7. 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  8. 去掉video视频播放器下的下载按钮

    去掉video视频播放器下的下载按钮: video::-internal-media-controls-download-button { display:none; } video::-webkit ...

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

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

随机推荐

  1. 创建基于 AFS 的 Docker 容器卷

    标准的 Docker 容器卷一般是位于 Docker 主机上的一个本地目录.在这样的配置下,容器必须依赖于一台特定的主机,因此使得容器的迁移和扩展变得困难.通过使用容器卷插件,能让容器访问独立于主机的 ...

  2. Mysql进阶-day3

    多实例介绍: mysql多实例就是一台服务器开启多个不同的服务端口(3306,3307),运行多个MySQL服务进程,这些服务进程通过不同的socket监听不同的服务端口来提供各自的服务端口. 这些m ...

  3. 【[CQOI2009]跳舞】

    首先这种匹配类问题一看就是网络流了 之后想一想怎么搞 发现题目的意思是使得跳舞最少的男生跳的舞最多 很自然想到二分答案啊 现在转化成了一个判定性问题,能否使得所有人都跳上\(k\)只舞 由于喜欢和不喜 ...

  4. [CQOI2006]凸多边形(半平面相交)

    嘟嘟嘟 本来我要写feng shui这道题的.然后网上都说什么半平面相交,于是我还得现学这个东西,就来刷这道模板题了. 所谓的半平面相交和高中数学的分数规划特别像.比如这道题,把每一条边看成一条有向直 ...

  5. 1、Android-活动(上)

    1.1.活动是什么 活动(Activity)是最容易吸引用户的地方,他是一种可以包含用户界面的组件 主要用于和用户进行交互 一个用户可以包含零个或多个活动,不包含活动的程序少见 1.2.活动的基本用法 ...

  6. Appium基础篇(一)——启动emulator

    1. Appium API文档:链接参考 http://appium.io/slate/cn/v/?ruby#appium-介绍. 2. Appium 安装篇:http://www.cnblogs.c ...

  7. leetcode64. Minimum Path Sum

    这个题是从左上角到右下角的路径和最小,实际就是一道dp题. 第一种写法是只初始化(0,0)位置,第二种写法则是把第一行.第一列都初始化了.个人更喜欢第二种写法,简单一点. dp的右下角的值就为最终的值 ...

  8. js replace替换一段文本中所有的相同字符

    在html<textarea>标签中回车换行的代码是: \n,html编辑器的回车换行是:\r\n或是\n. 下图是存入后台的<textarea>的文本,需要在页面上显示出来, ...

  9. 【洛谷P2680】运输计划

    题目链接 题目大意: 一棵\(n\)个点的带边权的数,给定\(m\)条树上两点间的路径,现在你可以让树上任意一条边的权值变为零, 问如何选边使得\(m\)条路径中边权和最大的路径的边权和最小 \(\m ...

  10. [LuoguP1352][FJSC]没有上司的舞会

    [LuoguP1352][FJSC]没有上司的舞会(Link) 现在你有一棵树,每一个点有一个点权\(R[i]\),如果选择了\(i\)点,那么\(i\)子树上的所有的点都不能选,现在要求选择若干个点 ...