Chrome浏览器video样式控制-隐藏下载按钮
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样式控制-隐藏下载按钮的更多相关文章
- 去掉谷歌浏览器 video标签下的下载按钮
一.判断浏览器版本(区分谷歌和360浏览器) function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字 ...
- 手把手教你Chrome浏览器安装Postman(含下载云盘链接)【转载】
转载自:http://www.ljwit.com/archives/php/278.html 说明: Postman不多介绍,是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.本文主要 ...
- html页面原生video标签隐藏下载按钮
在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题. 虽然简介视频是非付费的,但也不希望会有下载按钮或者 ...
- 手把手教你Chrome浏览器安装Postman(含下载云盘链接)(转)
文章转自http://www.ljwit.com/archives/php/278.html 说明: Postman不多介绍,是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.本文主要 ...
- 谷歌浏览器:audio如何隐藏下载按钮
当我们使用原生的audio标签时,可以看到如下的效果. 那么如何让下载按钮隐藏掉呢? 1. controlsList="nodownload" // 这个方法只支持 Chrome ...
- [转]Chrome浏览器的离线安装包下载地址
每当chrome有更新之后,都有不少用户想要下载离线版的安装文件,但苦于找不到下载地址而发愁,其实这个问题很简单,下面我来分享一下方法(仅针对Windows操作系统): 对于稳定版(正式版)Chrom ...
- Chrome浏览器Json查看插件JsonHandle下载以及无法安装插件的解决方法
场景 在使用Chrome浏览器查看Json数据时如果没有插件会挤作一团. 安装JsonHandle插件后 博客: https://blog.csdn.net/badao_liumang_qizhi 关 ...
- IE 、Firefox、Chrome 浏览器在 F12 控制台下切换至不同框架介绍
有不少网页的页面,还在使用 iframe 标签,而此时,相当于页面有两个 window 对象,一个为当前页面 window ,另一个则为 iframe 页面下的 window .因为,有时候需要在 c ...
- audio隐藏下载按钮
// 这个方法只支持 Chrome 58+, 低于该版本的是没有无法隐藏的 <audio src="/i/horse.ogg" controls="controls ...
随机推荐
- Arm-kernel 内存收集【转】
转自:http://blog.csdn.net/linyt/article/details/6627664 Linux kernel的内存管理子系统非常复杂,为了深入了解内存管理系统,我打算分多篇文章 ...
- 64_p6
polkit-kde-5.10.1-1.fc26.x86_64.rpm 12-Jun-2017 13:45 84854 polkit-libs-0.113-8.fc26.i686.rpm 13-Apr ...
- 模板为webpack的目录结构
目录结构 | -- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm ...
- LINUX内核中的机制OOM
[概念] LINUX内核中有一个机制叫做OOM killer(Out Of Memery killer) 该机制监控内存占用过大,尤其是瞬间消耗大量内存的进程, 为了防止内存被耗尽,所以OOM kil ...
- Linux下var目录介绍
var目录 /var 包括系统运行时要改变的数据.其中包括每个系统是特定的,即不能够与其他计算机共享的目录,如/var/log,/var/lock,/var/run.有些目录还是可以与其他系统共享,如 ...
- Mybatis基础及入门案例
这几天正在对SSM框架的知识进行一个回顾加深,有很多东西学的囫囵吞枣,所以利用一些时间进一步的学习.首先大概了解一下mybatis的使用,再通过一个案例来学习它. 什么是MyBatis Mybatis ...
- 使用OpenSSL自签发服务器https证书
OpenSSL官方推荐win32可执行文件版下载:http://www.slproweb.com/products/Win32OpenSSL.html ca.key CA私钥: openssl gen ...
- 【PAT】1012. 数字分类 (20)
1012. 数字分类 (20) 给定一系列正整数,请按要求对数字进行分类,并输出以下5个数字: A1 = 能被5整除的数字中所有偶数的和: A2 = 将被5除后余1的数字按给出顺序进行交错求和,即计算 ...
- 面试题30:最小的K个数
方法一:利用partition void GetLeastNumbers_Solution1(int* input, int n, int* output, int k) { || k <= ) ...
- 常用开放api【长期更新】
获取时间: 苏宁:http://quan.suning.com/getSysTime.do 淘宝:http://api.m.taobao.com/rest/api3.do?api=mtop.commo ...