css - 样式化浏览器原生视频控件

Question

是否可以跨浏览器设置浏览器原生视频控件的样式，例如来自 HTML5 视频标签的视频？

我不明白这是否可能，除了this article，我找不到任何东西。但它似乎使用 Javascript。

我想让控制栏适合视频宽度；从附图中可以看出，控制栏超出了视频宽度。

上图的 HTML

 <div class="video centered-content">
    <a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close">X</a>
        <video width="63%" height="60%" id="video" class="video" controls>
            <source src="<?php echo base_static_url();?>media/video.mp4">
            <source src="<?php echo base_static_url();?>media/video.ogv">
            <source src="<?php echo base_static_url();?>media/video.webm">
        </video>
    </a>
</div>

Answer 1

这里是一个很好的样式化 native 播放器控件的例子(刚刚在 Chrome 中测试过):https://codepen.io/BainjaminLafalize/pen/GiJwn

要更改播放器控件栏的宽度:

video::-webkit-media-controls-panel {
  width: 40px;
}