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. Mac环境下Redis的安装

    1.下载 官网下载地址:https://redis.io/download,选择对应的下载版本,我下载的是4.0.12 2.安装 1)下载文件解压后复制到/usr/local/目录下(快速找到路径小技 ...

  2. 基于Spring注解搭建SpringMVC项目

    在2018寒冬,我下岗了,因为我的左脚先迈进了公司的大门.这不是重点,重点是我扑到了老板小姨子的怀里. 网上好多教程都是基于XML的SpringMVC,想找一篇注解的,但是写的很模糊,我刚好学到这里, ...

  3. day04 流程控制

    在python中流程控制主要有三种:顺序流程.分支流程.循环流程 1.顺序流程:在宏观上,python程序的运行就是自上而下的顺序流程: 2.分支流程:分支流程主要是  if...else....流程 ...

  4. Java线程池(待续)

    线程池是预先创建线程的一种技术..线程池在还没有任务到来之前,创建一定数量的线程,放入空闲队列中.这些线程都是处于睡眠状态,即均为启动,不消耗CPU,而只是占用较小的内存空间.当请求到来之后,缓冲池给 ...

  5. centOS6.5 mysql-community-server安装失败

    卸载mysql,重新装 yum install mysql-server 图中没有放卸载的图 [root@cgrctenOS6 ~]# yum install mysql-community-serv ...

  6. table td中的内容过长,显示为固定长度,多余部分用省略号显示

    简单描述:table数据过长,结果顶到下一格,影响了数据的查看 解决办法: 给table 加上style属性   另外 给td加上style标签修饰 <table class="tab ...

  7. 解决MongoDB登录的WARNING

    解决MongoDB登录的WARNING 1.安装完成运行mongodb警告内容如下: 2019-01-17T15:41:50.578+0800 I CONTROL [initandlisten] ** ...

  8. Flink on yarn的配置及执行

    1. 写在前面 Flink被誉为第四代大数据计算引擎组件,即可以用作基于离线分布式计算,也可以应用于实时计算.Flink可以自己搭建集群模式已提供为庞大数据的计算.但在实际应用中.都是计算hdfs上的 ...

  9. status 返回当前请求的http状态码

    status属性返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取.完整的HTTP状态码如下: 100 Continue 初始的请求已经接受,客户应当继续发送请求的其余部分 101 ...

  10. 理解go的闭包

    package main import ( "fmt" ) func test(a int) { a++ fmt.Println(a) } func test2() func() ...