h5的video下载按钮在部分手机系统上是不可用的，想要把这个按钮屏蔽掉，可苦于没有像屏蔽全屏按钮那样的伪类video::-webkit-media-controls-fullscreen-button {display: none;}

只好找了一种比较搓的方法：

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
     width: calc(100% + 30px);
}

用CSS hacker的方式并非好的方案，这依赖于chrome的DOM选择器，一旦DOM结构变化可能就会导致方案失效。

通过加长控制条内容的宽度，超出部分不显示，达到了目的，不知大家有没有更好的方法？

h5的video下载按钮如何隐藏的更多相关文章

  1. html中如何移除video下载按钮

    我发现部分安卓手机使用video标签播放视频的时候会自带一个下载按钮,一般产品大多都不需要这一功能,那如何屏蔽下载按钮呢?有下面两种,请一定使用第一种方式,使用css控制会有兼容性问题,建议不要使用这 ...

  2. html页面原生video标签隐藏下载按钮

    在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题. 虽然简介视频是非付费的,但也不希望会有下载按钮或者 ...

  3. Chrome浏览器video样式控制-隐藏下载按钮

    Chrome浏览器在升级之后 video的样式和之前是不一样的,如果使用原生video的话可能会有影响,实际项目中最好使用第三方插件以保证video在所有浏览器都有统一的样式 一.如何隐藏video的 ...

  4. 如何隐藏 video 元素的下载按钮

    1. 使用 video 元素的 ControlList API <video controls controlsList="nodownload"></video ...

  5. 隐藏video标签的下载按钮

    问题: 使用video标签时,有些浏览器会显示视频的下载按钮,而这并不是我们需要的功能,必须想办法去掉. 解决方法: 使用下面的css可以达到隐藏下载按钮的效果,但是点击下载的位置,还是能出现开始下载 ...

  6. 【HTML5】video 标签禁用自带的下载按钮

    h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 <style type="text/css"> video::-internal-me ...

  7. 用HTML5 video标签插入视频，在谷歌浏览器上播放视频时，右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  8. 谷歌浏览器：audio如何隐藏下载按钮

    当我们使用原生的audio标签时,可以看到如下的效果. 那么如何让下载按钮隐藏掉呢? 1. controlsList="nodownload" // 这个方法只支持 Chrome ...

  9. 去掉谷歌浏览器 video标签下的下载按钮

    一.判断浏览器版本(区分谷歌和360浏览器) function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字 ...

随机推荐

  1. java程序设计习题总结

    ---恢复内容开始--- main()方法的参数名可以改变:main()方法的参数个数不可以改变. 当一个程序没有main()方法是,是可以编译通过的,但是不能给运行,因为找不到一个主函数入口. 标识 ...

  2. 通过配置文件新建solr的core

    目录solr-7.5.0\server\solr 1.  新建文件夹 test-core 2. 在文件夹test-core下新建core.properties name=test-core confi ...

  3. TP5架构下链接SQL数据库的一种方法

    1.database设置 2.连接到所需要的表格 *.数据库目录

  4. STL--sort源码分析

    SGI STL sort源码 temlate <class RandowAccessIterator> inline void sort(RandowAccessIterator firs ...

  5. Running Tensorflow on AMD GPU

    keras+tensorflow: based on AMD GPU https://rustyonrampage.github.io/deep-learning/2018/10/18/tensorf ...

  6. The base and high address of the custom IP are not correctly reflected in xparameters.h in SDK

    This issue has been observed in 2015.3, 2015.4, and 2015.4.1 builds of Vivado. When you create and a ...

  7. centos定时删除指定日期之前的文件

    * 5 * * * find /tmp/* -name "yhwl_task.log*" -ctime +3 -exec rm -rf {} \; * 5 * * * find / ...

  8. webpack 打包报错：One CLI for webpack must be installed. These are recommended choices, delivered as separate packages

    webpack 打包报错: One CLI for webpack must be installed. These are recommended choices, delivered as sep ...

  9. oracle INS-13001 环境不满足最低要求

    使用windows10等系统安装oracle 11g等版本的数据库时,经常会发现开始安装时弹出[INS-13001 环境不满足最低要求]的提示,此时可以点击[是]继续安装. 也可以点击[否]结束安装, ...

  10. ASP.NET Core + Vue.js 开发

    1.新建 项目文件夹 pro,在 VS CODE 打开终端,输入dotnet new mvc 命令,新建asp.net core项目. 2.在Startup.cs添加webpack的引用与配置 usi ...