修改video标签自带按钮的默认样式

这里所说的修改video标签中自带按钮的默认样式，指的是用css就可以控制视频播放按钮的大小等

我们来看一下 video 的内部构造：

chrome 下，开发者工具 setting Preferences Elements 勾选 "Show user agent shadow DOM"

再回来看，已经可以看到 video 的内部结构了

瞄一眼，有没有看到很熟悉的 -webkit-media-controls-fullscreen-button ？

确实如此，其他的按钮，包括播放按钮、播放进度条、静音按钮、音量条等，都可以像全屏按钮一样自定义样式。不止是隐藏噢，其他的样式同样适用，比如。。

通过video::-webkit-media-controls-fullscreen-button{ display: none; }或者*::-webkit-media-controls-fullscreen-button{ display: none; }就能控制全屏按钮的样式，其他按钮是一样的。

但是，下载按钮很特别，是获取不到的，所以无法控制它的样式，但是可以将它隐藏

怎么办？有两种方式：

1. controlsList

在 video 上加属性 controlsList="nodownload"，就可以隐藏下载按钮。

就这么简单？当然不是。。。这种方式需要 Chrome 58+ 才支持，不能用于生产环境

2. overflow: hidden

video::-webkit-media-controls-enclosure{ overflow: hidden; }

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

就是将控制条面板设的长一些，超出的隐藏。。。这种方式还是勉强可以用于生产环境的，因为没有别的更好的办法。。。

修改video标签自带按钮的默认样式相关推荐

浏览器自带的autocomplete默认样式是淡黄色的背景
浏览器自带的autocomplete默认样式是淡黄色的背景,字体也是黑色的修改默认样式: /*改变浏览器autocomplete默认的样式*/ p.login-input input:-webkit ...
修改video标签默认样式问题video播放器样式优化；video播放器默认显示图片
需求: 1.播放器可以支持上传默认封面图片 2.播放器的进度条长度拉长些,与播放器长度一样长,或者其他方式美化一下首先需求1.播放器可以支持上传默认封面图片解决方案: 1.第一种方法可以直接在vid ...
前端| js动态修改video标签视频不刷新的问题
问题描述:在网页上用<video>标签放一个视频播放器,点击视频目录来自动播放不同的视频.通过js动态生成li,点击li之后更改<video>标签<source>中 ...
隐藏 video标签的下载按钮
在 cordova-plugin-inappbrowser插件中隐藏 Android 的 webView里的 <video>标签: let webView = window.cordova ...
vue播放视频使用原生video标签基本功能（不含样式）
直接上代码: <template><div style="display: flex"><!-- 原生video标签,controls表示为可控制视频 ...
【CSS】button(按钮)去默认样式
button 按钮去掉默认的灰色样式给它设置 border: 0
小程序去除button按钮的默认样式
/* 去除button默认样式 */ button::after { border: none; } button { background-color: transparent; padding-l ...
video标签去除下载按钮
HTML中直接使用video来播放视频,在Chrome浏览器.360浏览器.QQ浏览器(以及其他一些使用Chrome内核Blink)等中都会出现下载按钮,但我们一般又不希望出现下载按钮. 好像是从Ch ...
微信内置浏览器在使用video标签时（安卓）默认全屏的原因及解决办法
根据X5论坛得到的答案是:设计如此. 腾讯真是越来越嚣张了,一家独大后用户体验都不注重了(不给程序员留活路). 听说有个申请加入vdeo白名单的,域名验证后就可以解决默认全屏(反正我是没见过申请入口, ...

修改video标签自带按钮的默认样式

修改video标签自带按钮的默认样式相关推荐

最新文章

热门文章