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 ...
随机推荐
- angular项目中使用ngSemantic
npm install ng-semantic --save npm install jquery --save 下载 Official Semantic UI bundle ( .zip ) fro ...
- Visual Tracking with Fully Convolutional Networks
http://blog.csdn.net/carrierlxksuper/article/details/48918297 传统的跟踪方法依赖低维的人工特征,但这种特征对目标的外观变化等问题不够鲁棒. ...
- plt-3D打印1
plt-3D打印 import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D ...
- Web开发:URL编码与解码
通常如果一样东西需要编码,说明这样东西并不适合传输.原因多种多样,如Size过大,包含隐私数据,对于Url来说,之所以要进行编码,是因为Url中有些字符会引起歧义. 例如Url参数字符串中使用key= ...
- Mybatis基础及入门案例
这几天正在对SSM框架的知识进行一个回顾加深,有很多东西学的囫囵吞枣,所以利用一些时间进一步的学习.首先大概了解一下mybatis的使用,再通过一个案例来学习它. 什么是MyBatis Mybatis ...
- 解决xshell4中文乱码
前言 在公司看到别人使用xshell后,由于之前一直使用SecureCRT所以心里一直痒痒的想换下xshell试下.于是在昨天晚上使用xshell,却被中文乱码折腾了很长时间以至于想放弃,最终灵光一现 ...
- Node.js 的异步机制由事件和回调函数——循环中的回调函数
var fs=require('fs'); var files =['a.txt','b.txt','c.txt']; // for (var i = 0; i < files.length; ...
- Vibrator震动
今天又学一招: Android手机中的震动由Vibrator实现.设置震动事件,需要知道其震动的时间长短.震动的周期等. 在 Android Vibrator中,震动的时间以毫秒计算(1/1000秒) ...
- Java Stream简介, 流的基本概念
在Javaor .net编程中, 我们经常见到"stream" 这个字眼. 我们大概知道这是个流的意思, 如果看完本文的话, 应该会有1个大概的概念. 一, Java中什么是St ...
- vue中使用ueditor富文本编辑框
1.把下载的Ueditor资源,放入静态资源static中. 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图: 2.在main.js中引入以下文件 ...