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. 64_p8

    python2-cotyledon-tests-1.6.7-2.fc26.noarch.rpm 12-Feb-2017 10:28 23182 python2-couchdb-1.0-6.fc26.n ...

  2. OAuth认证与授权

    什么是OAuth授权?   一.什么是OAuth协议 OAuth(开放授权)是一个开放标准. 允许第三方网站在用户授权的前提下访问在用户在服务商那里存储的各种信息. 而这种授权无需将用户提供用户名和密 ...

  3. selenium grid应用1-多浏览器执行用例

    driver =webdriver.Remote(command_executor=’http://127.0.0.1:4444/wd/hub’, desired_capabilities=Desir ...

  4. SipDroid +miniSIPServer搭建SIP局域网语音通话(一)

    最近在做语音通讯功能,参考下优秀开源软件SIPDroid好就这个了,svn check下最新的源代码 http://sipdroid.googlecode.com/svn/trunk/sipdroid ...

  5. Linux Supervisor的安装与使用入门---SuSE

    Linux Supervisor的安装与使用入门 在linux或者unix操作系统中,守护进程(Daemon)是一种运行在后台的特殊进程,它独立于控制终端并且周期性的执行某种任务或等待处理某些发生的事 ...

  6. NGUI优化之Drawcall

    今天在运行之前的程序时,无意中发现一个简单的menu菜单页面drawcall居然达到接近30了,这个数值感觉太高了. 后网上查询关于降低drawcall的方法,发现主要有以下几点: 1.少用Panel ...

  7. Ps钢笔操作技巧

    鼠标左键单击=新建锚点:Ctrl+鼠标左键=移动锚点/移动调节点: Alt+鼠标左键=锚点/角点转换: 方向键=微调锚点位置: shift+鼠标左键=新建水平/垂直锚点:Ctrl+Alt+鼠标左键=选 ...

  8. Selenium_Page Object设计模式

    Page Object 介绍 Page Object设计模式的优点如下: 减少代码的重复 提高测试用例的可读性 提高测试用例的可维护性,特别是针对UI频繁变化的项目 当Web页面编写测试时,需要操作该 ...

  9. django rest_framework比较完整的自定义实现样例

    里面有自定义的更新策略, 序列化时,考虑nest及显示. 很有参考意义. 然后,前端,可以考虑用angular.js或vue.js实现. 每次以token进行认证. url.py router = D ...

  10. js 获取定位信息

    1.百度账号 申请一个key http://developer.baidu.com/map/index.php?title=lbscloud 2.开发下面demo代码 <!DOCTYPE htm ...