我发现部分安卓手机使用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. JAVA后台框架优化之日志篇

    1.日志规范 各业务系统日志需要统一,以方便查看.收集日志, 日后统一ELK日志管理,以下为项目的日志配置, 这是兼容当前系统的日志,以后推行微服架构时会有变动,但日志存放方式不会改变,日后会推行sp ...

  2. javascript animation lib greensock gsap介绍

    一般前台做动画有以下几种方式: 1. 简单的css transition动画; 2. css animation动画 3. javascript库动画 一般来说css html5动画只适用于简单的形变 ...

  3. 【Oracle】查看被锁的表和解锁

    --以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...

  4. 电话面试问答Top 50 --[伯乐在线]

    今年是2015年,在过去几年中,电面(电话面试)是筛选程序员职位候选人的最流行的方式.它让雇佣双方很容易互相了解对方,候选人不需要去未来雇主的所在地,面试官也不用做额外的安排.这是我介绍程序员面试问题 ...

  5. Excel工资表

  6. 企业办公领域: Windows + Office的组合在未来能抵挡住 Google Apps的冲击么

    从个人角度讲,我基本上不怎么喜欢微软的产品,即便是其无处不见的Windows. Windows 8用了几个月的后,实在无法忍受其某些SB的设计,还是换回Win7.另外自从用上了MacBook 以后, ...

  7. XML序列化 System.Xml.Serialization

    一.定义元数据 XML序列化常用属性:XMLRoot,XMlType.XMLText.XMLEnum等 [Serializable] [XmlRoot] public class Product { ...

  8. Apache Spark : Introduction

    看了一点<数据算法:Hadoop/Spark大数据处理技巧>,觉得有必要了解一下 Spark . 以上. Spark was introduced by Apache Software F ...

  9. Java 运算符(引用和对象)

    1. 算数运算符 就是+.-.*./.%.++.--这些,没什么好说的,稍微强调下自加,自减: 前缀自增自减法(++i,--i): 先进行自增或者自减运算,再进行表达式运算. 后缀自增自减法(i++, ...

  10. Java遇到的问题、错误——持续更新

    内容:dead code.关于eclipse没有js代码提示的解决 持续更新 ######################################################## dead ...