为浏览器原生视频控件设置样式 [英] Styling browser-native video controls

问题描述

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

我不明白是否可以或者不，我找不到任何东西：

，其中显示了如何完成。

Is it possible to cross-browser style the controls of a browser-native video such as video from HTML5's video tag?

I do not understand if it is possible or not, I can't find anything other than:

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

but it seems to be using Javascript

I would like to make the controls bar fit the video width; as you can see from the image attached, the controls bar excedes the video width.

HTML for the above image

 <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>

解决方案

You can't style the browser's default control set, but you can use the (JavaScript) Media API to build your own control set which of course you can style in any way that you like.

Take a look at Working with HTML5 multimedia components – Part 3: Custom controls which shows you how this can be done.

这篇关于为浏览器原生视频控件设置样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！