设计本机谷歌Chrome视频控件

Question

你好我厌倦了看起来无聊的谷歌Chrome原生html5视频播放器设计.

每次改变它都会变得越来越糟糕.

现在它是一个明亮的白色,当你问我时,它完全不满意.

所以我决定创建一个小用户风格让它变暗.

这是我走了多远,但我不可能改变小圆圈的颜色.

欢迎任何帮助.

这是我的实际进展:

video::-webkit-media-controls-panel {
    background-color: #161618;
}

video::-webkit-media-controls-volume-slider-container {
    background-color: cyan;
}

video::-webkit-media-controls-volume-slider {
    background-color: #1FB2B0;
}

video::-webkit-media-controls-timeline {
    background-color: #1FB2B0;
}

这是它的jsfiddle链接.

https://jsfiddle.net/cyc1j0nv/7/

Answer 1

通过对媒体控件作为一个整体应用过滤器,我最终得到了我想去的地方(或多或少).当然,也可以单独对控件的每个伪元素应用过滤器.

video::-webkit-media-controls{
  filter: hue-rotate(180deg) brightness(0.9);
}

<h1>Styling video controls</h1>
<video controls src="https://a.desu.sh/zflbzy.webm"><</video>

*注意:由用户根据需要向CSS添加供应商前缀