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. shell中$*与$@的区别

    $*所有的位置参数,被作为一个单词 注意:"$*"必须被""引用 $@ 与$*同义,但是每个参数都是一个独立的""引用字串,这就意味着参数被 ...

  2. C/C++——C语言跳出多重循环方法

    c语言的break语句只能跳出离它最近的一层循环,但是我们有时候需要跳出多层循环,以下有几种跳出多重循环的方法: 1. 使用goto ; i < MAX1; i++) { ; j < MA ...

  3. hashCode()与equals()区别

    这两个方法均是超类Object自带的成员方法.Object类是所有Java类的祖先.每个类都使用 Object 作为超类.所有对象(包括数组)都实现这个类的方法.在不明确给出超类的情况下,Java会自 ...

  4. [重磅]Deep Forest,非神经网络的深度模型,周志华老师最新之作,三十分钟理解!

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术感兴趣的同学加入. 深度学习最大的贡献,个人认为就是表征 ...

  5. ultra-console

    console.__proto__.styleText = function (option) { if (!option) { console.groupCollapsed('请输入option') ...

  6. 邀请用户进TestFlight 体验 App 的测试版本

    iphone手机用户,在工作中常见到,APP版本现在是Beta阶段(iOS版本),需要邀请一些用户来体验新版本,在版本上线前提出更好的建议及时进行修改,此时用到了testflight,很方便的通过邀请 ...

  7. sql server 存储过程解密

    Create PROCEDURE [dbo].[sp_windbi$decrypt] () AS /**//* 王成辉翻译整理,转贴请注明出自微软BI开拓者www.windbi.com 调用形式为: ...

  8. 如何让EasyUI弹出层跳出框架

    这个的解决方法其实挺简单的. 只要在最外面的框架页面加个div,然后用parent.div的id就可以的.但是必须得弹出框得是一个页面. <div id="div_info" ...

  9. [实战]MVC5+EF6+MySql企业网盘实战(25)——种子列表

    写在前面 上篇文章实现了视频列表,本篇文章继续实现其他的文件列表.功能相似.这里就不再赘述. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MyS ...

  10. video.js分段自动加载视频【html5视频播放器】

    突发奇想的需求,要在官网上放一个一个半小时的视频教程…… 然而,加载成了问题,页面是cshtml的.net混合网站,不知道哪儿的限制,导致视频加不出来. 没有办法,只能前端想办法了. 于是将视频切割成 ...