造型浏览器的原生视频控件(Styling browser-native video controls

是否可以跨浏览器的风格，例如从HTML5的视频标签的视频浏览器的原生视频的控制？

我不明白，如果它是可以或不可以，我再也找不到比其他任何东西：

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

但它似乎是使用Javascript

我想提出的控制杆适合视频的宽度; 如可以从附接在图像看到的，控制杆excedes视频的宽度。

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）的媒体API来构建自己的控制一套，当然你可以在你喜欢的任何方式样式英寸

看看与HTML5的多媒体处理组件-第3部分：自定义控件这表明你如何可以做到这一点。

Answer 2:

这里是造型本地播放器控制一个很好的例子（只在Chrome测试）： https://codepen.io/BainjaminLafalize/pen/GiJwn

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

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

Answer 3:

您可以风格在某些浏览器本地控制，使用影子DOM。 启用调试检查设置阴影DOM：

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

HTML5视频控制-使大？

Answer 4:

你可以风格的影子DOM，但你需要看个别每一个浏览器和浏览器更新可能破坏你的造型。

我建议考虑看看MediaElement.js ，让你可以使用CSS来风格，并已无障碍优化跨浏览器的控制。

或者，如果你只需要几个控件反正，建立自己的： https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics

文章来源: Styling browser-native video controls