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

前端之家收集整理的这篇文章主要介绍了css – 设置浏览器原生视频控件的样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以跨浏览器设置浏览器原生视频的控件,例如来自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>

解决方法

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

看看Working with HTML5 multimedia components – Part 3: Custom controls,它向您展示了如何做到这一点.

猜你在找的CSS相关文章