设置浏览器原生视频控件的样式

Question

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

我不明白是否有可能，除了以外我找不到任何东西：

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

但似乎是在使用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>
        </div>

Answer 1

您无法设置浏览器的默认控件集的样式，但您可以使用（JavaScript）Media API构建自己的控件集，当然您可以按照自己喜欢的方式设置样式。

查看Working with HTML5 multimedia components – Part 3: Custom controls，了解如何做到这一点。

Answer 2

以下是样式化原生播放器控件（仅在Chrome中测试）的一个很好的示例：https://codepen.io/BainjaminLafalize/pen/GiJwn

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

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

Answer 3

您可以使用shadow DOM在某些浏览器中设置本机控件的样式。在调试检查器设置中启用阴影dom：

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

HTML5 Video Controls - make larger?

Answer 4

您可以设置阴影DOM的样式，但需要单独查看每个浏览器，并且浏览器更新可能会破坏您的样式。

我建议您看一下MediaElement.js，它为您提供了跨浏览器控件，可以使用CSS设置样式，并且已经对可访问性进行了优化。

或者，如果仍然只需要一些控件，则构建自己的控件：https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics

Answer 5

由于不能在每个浏览器（即Firefox）中设置控件的样式，因此使用自定义控件是一种方法。

可以自己编写，但需要一些时间，并且不具备其他控件所具有的功能。

我推荐Flowplayer，它非常易于使用和样式化。它还具有其他有用的功能，例如允许您控制视频的加载方式（这对我们来说非常有用，因为AWS S3会按文件的每次观看收费）。