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

一、如何隐藏video的下载按钮

  1. 在Chrome58以上的版本中使用 video元素的  controlsList API :https://googlechrome.github.io/samples/media/controlslist.html   代码如下:

    <video controls controlsList="nodownload"></video>

  2. 在Chrome58以下的版本中使用css去控制,简单来说就是将下载按钮挤出可见范围,这样就可以变相的认为按钮被隐藏了,代码如下:

video::-webkit-media-controls {
overflow: hidden !important;
}
video::-webkit-media-controls-enclosure {
width: calc(100% + 32px);
margin-left: auto;
}

  

Chrome浏览器video样式控制-隐藏下载按钮的更多相关文章

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

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

  2. 手把手教你Chrome浏览器安装Postman(含下载云盘链接)【转载】

    转载自:http://www.ljwit.com/archives/php/278.html 说明: Postman不多介绍,是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.本文主要 ...

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

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

  4. 手把手教你Chrome浏览器安装Postman(含下载云盘链接)(转)

    文章转自http://www.ljwit.com/archives/php/278.html 说明: Postman不多介绍,是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.本文主要 ...

  5. 谷歌浏览器:audio如何隐藏下载按钮

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

  6. [转]Chrome浏览器的离线安装包下载地址

    每当chrome有更新之后,都有不少用户想要下载离线版的安装文件,但苦于找不到下载地址而发愁,其实这个问题很简单,下面我来分享一下方法(仅针对Windows操作系统): 对于稳定版(正式版)Chrom ...

  7. Chrome浏览器Json查看插件JsonHandle下载以及无法安装插件的解决方法

    场景 在使用Chrome浏览器查看Json数据时如果没有插件会挤作一团. 安装JsonHandle插件后 博客: https://blog.csdn.net/badao_liumang_qizhi 关 ...

  8. IE 、Firefox、Chrome 浏览器在 F12 控制台下切换至不同框架介绍

    有不少网页的页面,还在使用 iframe 标签,而此时,相当于页面有两个 window 对象,一个为当前页面 window ,另一个则为 iframe 页面下的 window .因为,有时候需要在 c ...

  9. audio隐藏下载按钮

    // 这个方法只支持 Chrome 58+, 低于该版本的是没有无法隐藏的 <audio src="/i/horse.ogg" controls="controls ...

随机推荐

  1. 访问公网WebService服务

    接下来,我们演示如何访问公网webservice服务. 我们以访问 http://www.webxml.com.cn/zh_cn/index.aspx 为例,主要演示手机号码归属地查询服务(使用说明书 ...

  2. 使用ExtJS做一个用户的增删改查

    extjs版本为4.2,用户数据放在静态list中存储 User.java package com.ext.demo.dao; public class User { private int id; ...

  3. Gradient-Based Learning Applied to Document Recognition 部分阅读

    卷积网络        卷积网络用三种结构来确保移位.尺度和旋转不变:局部感知野.权值共享和时间或空间降采样.典型的leNet-5如下图所示: C1中每个特征图的每个单元和输入的25个点相连,这个5* ...

  4. spring源码分析---事务篇

    上一篇我介绍了spring事务的传播特性和隔离级别,以及事务定义的先关接口和类的关系.我们知晓了用TransactionTemplate(或者直接用底层P的latformTransactionMana ...

  5. (二) Mysql 数据类型简介

    第一节:整数类型.浮点数类型和定点数类型 1,整数类型 2,浮点数类型和定点数类型 M 表示:数据的总长度(不包括小数点): D 表示:小数位: 例如 decimal(5,2)      123.45 ...

  6. 使用Nginx代理Django

    一.准备环境 检查python版本以及pip版本 [root@linux-node01 src]# python --version Python 2.7.5 [root@linux-node01 s ...

  7. BASH 的调试技巧

    平时在写 BASH 脚本时,总是会碰到让人抓狂的 BUG.和 C/C++ 这么丰富的调试工具相比,BASH 又有什么调试手段呢? 1 echo/print (普通技) 打印一些变量,或者提示信息.这应 ...

  8. UVA 1400."Ray, Pass me the dishes!" -分治+线段树区间合并(常规操作+维护端点)并输出最优的区间的左右端点-(洛谷 小白逛公园 升级版)

    "Ray, Pass me the dishes!" UVA - 1400 题意就是线段树区间子段最大和,线段树区间合并,但是这道题还要求输出最大和的子段的左右端点.要求字典序最小 ...

  9. 《大话设计模式》--UML图

    类图分三层: 第一层:类的名称,如果是抽象类,就用斜体显示 第二层:类的特性,通常是字段和属性 第三层:类的操作,通常是方法或行为 接口图:第一行是接口名称,第二行是接口方法 继承:用空心三角形+实线 ...

  10. PBR Step by Step(三)BRDFs

    BRDF BRDF(Bidirectional Reflectance Distribution Function)双向反射分布函数,用来描述给定入射方向上的入射辐射度以及反射方向上的出辐射度分布,B ...