HTML5 视频控件 - 变大？

【问题标题】：HTML5 Video Controls - make larger?HTML5 视频控件 - 变大？
【发布时间】：2013-10-17 08:53:12
【问题描述】：

我知道您可以自定义视频控件来制作自己的按钮/布局，但是有什么办法可以让默认控件变大吗？

【问题讨论】：

【解决方案1】：

不是以跨浏览器的方式，但控件是使用Shadow DOM 元素构建的。至少在 Chrome 中，您可以在开发工具设置中启用 Show Shadow DOM，检查视频播放器控件，并收集您需要提供的 CSS 以影响这些元素（在 webkit 浏览器中）。

抱歉，不确定其他浏览器对 Shadow DOM 内容的检查和样式的支持是什么。

【讨论】：

【解决方案2】：

您可以使用伪类，例如video::-webkit-media-controls-current-time-display 选择控制元素。

这是一个 codepen 示例，您可以在其中看到 HTML5 视频控件的一些示例样式：https://codepen.io/BainjaminLafalize/pen/GiJwn

它仅适用于基于 webkit 的浏览器 - Chrome、Opera 和 Safari。对于 Firefox 和 Edge/IE - 目前无法进行样式设置（2017 年 8 月）。

【讨论】：