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

只好找了一种比较搓的方法：

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

用CSS hacker的方式并非好的方案，这依赖于chrome的DOM选择器，一旦DOM结构变化可能就会导致方案失效。

通过加长控制条内容的宽度，超出部分不显示，达到了目的，不知大家有没有更好的方法？

h5的video下载按钮如何隐藏的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. 谷歌浏览器：audio如何隐藏下载按钮

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

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

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

随机推荐

  1. Pytorch学习笔记（一）Numpy SciPy MatPlotlib Tutorial

    英文原文链接:http://cs231n.github.io/python-numpy-tutorial/ Numpy Numpy是Python中科学计算的核心库.它提供了一个高性能的多维数组对象,以 ...

  2. vo类，model类，dto类的作用及划分

    1.entity里的每一个字段,与数据库相对应, 2.dto里的每一个字段,是和你前台页面相对应, 3.VO,这是用来转换从entity到dto,或者从dto到entity的中间的东西.   举个例子 ...

  3. $HOME

    Ubuntu中 命令行输入$HOME bash: /home/XXX: Is a directory $HOME 是用户主目录

  4. python爬虫得到unicode编码处理方式

    在用python做爬虫的时候经常会与到结果中包含unicode编码,需要将结果转化为中文,处理方式如下 str.encode('utf-8').decode('unicode_escape')

  5. phpredis扩展实现LBS距离计算和范围筛选

    来源 public function geo(){ $redis = new \redis(); $redis -> connect('127.0.0.1',6379); //位置增加 $res ...

  6. 面向对象之组合VS继承：继承过时了？

        在阅读Effective Java中的第16条时发现了一个有趣的机制或者说是模式,那就是组合(文中翻译为复用,但是作者认为组合更能体现这种模式的精神),并且文中建议使用组合.  那什么是组合, ...

  7. css3兼容360

    在头部添加 <!--启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit&qu ...

  8. oracle INS-13001 环境不满足最低要求

    使用windows10等系统安装oracle 11g等版本的数据库时,经常会发现开始安装时弹出[INS-13001 环境不满足最低要求]的提示,此时可以点击[是]继续安装. 也可以点击[否]结束安装, ...

  9. c博客作业--函数

    1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 刚刚开始学习函数的时候,由于之前对函数有过一定的了解,所以还算比较顺利,不过还是经常出现函数定义和调用的错误,这应该是对函 ...

  10. linux 大杂烩

    1.linux mysql输错命令 mysql命令行中执行多行命令时,如果前边输入的命令发生错误,是很令人头疼的事情,可以通过输入\c来取消前边的输入,重新进入“mysql->”提示符. 2.l ...