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

its*_*sme 18 css cross-browser custom-controls html5-video

是否可以跨浏览器设置浏览器原生视频的控件,例如来自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>
    </a>
</div>
Run Code Online (Sandbox Code Playgroud)

Ian*_*lin 18

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

看看使用HTML5多媒体组件 - 第3部分:自定义控件,向您展示如何完成此操作.

  • 你怎么能怪Adobe,因为你无法访问网络链接?它必须是您的最终结果,因为Adobe Developer Connection没有理由阻止任何人从他们的文章和教程中阻止任何人. (4认同)

Kri*_*ian 6

这是设置本机播放器控件样式的一个很好的示例(刚刚在Chrome中测试):https : //codepen.io/BainjaminLafalize/pen/GiJwn

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

video::-webkit-media-controls-panel {
  width: 40px;
}
Run Code Online (Sandbox Code Playgroud)


Rya*_*iss 3

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

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

HTML5 视频控件 - 放大吗?