【转】如何修改 video 样式

我们这里说的“修改 video 样式”并不是要自己实现一套 controls,而是尝试修改 video 的默认样式

隐藏全屏按钮

这个很容易查到

video::-webkit-media-controls-fullscreen-button{ display: none; }

那么,video::-webkit-media-controls 是什么?还可以用它来定义哪些元素的样式,见下文

自定义其它样式

为什么用一个 video 标签就可以播放视频呢,它内部是怎么实现的呢?

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

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

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

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

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

下载按钮

是不是感觉从此 video 尽在掌控,想让它啥样就啥样了?大部分情况下,确实如此。

然而,还有个不听讲的妖孽,就是下载按钮。尝试用 video::-internal-media-controls-download-button 定义隐藏,并不生效

怎么办?有两种方式:

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); }

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

参考

1. https://googlechrome.github.io/samples/media/controlslist.html HTMLMediaElement controlsList Sample

2. http://www.cnblogs.com/coco1s/p/5711795.html 神秘的 shadow-dom 浅析

3. http://www.cnblogs.com/kevinxue/p/6638733.html h5的video下载按钮如何隐藏

移动端环境险恶,上线前警惕自测!

from:https://baijiahao.baidu.com/s?id=1577249646248377416&wfr=spider&for=pc

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值