24

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

我不明白这是否可能，除了这篇文章，我找不到任何东西，但它似乎使用了 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>
4

5 回答 5

22

您无法设置浏览器的默认控件集的样式，但您可以使用 (JavaScript) Media API 来构建您自己的控件集，当然您可以以任何您喜欢的方式设置样式。

查看使用 HTML5 多媒体组件 - 第 3 部分：自定义控件，它向您展示了如何做到这一点。

于 2013-01-06T17:47:46.720 回答
6

这是一个很好的例子来设置原生播放器控件的样式（刚刚在 Chrome 中测试过）：https ://codepen.io/BainjaminLafalize/pen/GiJwn

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

video::-webkit-media-controls-panel {
  width: 40px;
}
于 2017-08-02T07:35:42.210 回答
3

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

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

HTML5 视频控件 - 变大？

于 2016-09-23T23:29:17.340 回答
1

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

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

或者，如果您只需要一些控件，请自行构建：https ://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics

于 2019-05-27T12:40:27.543 回答
0

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

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

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

于 2019-07-16T19:05:47.767 回答