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. 用VIM查看编辑二进制文件

    用VIM查看编辑二进制文件 vim可以很方便地编辑二进制文件,个人认为它比emacs的二进制编辑方式更好用.vim中二进制文件的编辑是先通过外部程序xxd来把文件dump成其二进制的文本形式,然后就可 ...

  2. Java线上应用故障之CPU占用高排查与定位

    最近线上频繁报警CPU空闲不足,故紧急排查后分享给大家 1.使用top命令,获取占用CPU最高的进程号 2.查看线程号对应的进程信息 命令:ps -ef|grep 22630 3.查看进程对应的线程信 ...

  3. Ubuntu 10.04 分辨率调整

    最近学长们看了我的本本都在问我,显卡驱动是不是出现什么问题了···分辨率这么差.当时我的分辨率是1024X768,于是我就想修改我的屏幕分辨率改成1280X800.本来很简单的事情,我做起来却非常的曲 ...

  4. Oracle常用sql语句(三)之子查询

    子查询 子查询要解决的问题,不能一步求解 分为: 单行子查询 多行子查询 语法: SELECT select_list FROM table WHERE expr operator (SELECT s ...

  5. C# 解决窗体闪烁

    C# 解决窗体闪烁 在Windows窗体上造成“闪烁”的窗体上有很多控制.造成这种闪烁的原因有两个: 1.当控件需要被绘制时,Windows发送一个控件两个消息.第一个(WM_ERASEBKGND)导 ...

  6. python datetime 时区(timezone) dateutil

    记录下python中的时区问题, 代码如下:  包括datetime.datetime对象使用不同的时区,以及在不同时区间转换. from datetime import datetime from ...

  7. mysql 导入数据到postgresql

    创建PG的表脚本 DROP TABLE IF EXISTS "public"."t_resource_info"; CREATE TABLE "pub ...

  8. GO基本数据结构练习:数组,切片,映射

    按<GO IN ACTION>的书上进行. 应该是第二次了哦~~ package main import ( "fmt" ) func main() { array : ...

  9. [BZOJ4942][Noi2017]整数 线段树+压位

    用线段树来模拟加减法过程,维护连续一段中是否全为0/1. 因为数字很大,我们60位压一位来处理. #include<iostream> #include<cstring> #i ...

  10. React.js学习之理解JSX和组件

    在开启JSX的学习旅程前,我们先了解一下React的基本原理.React本质上是一个"状态机",它只关心两件事:更新DOM和响应事件,React不处理Ajax.路由和数据存储,也不 ...