CSS 样式浏览器原生视频控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14184846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling browser-native video controls
提问by itsme
Is it possible to cross-browser style the controls of a browser-native video such as video from HTML5's video tag?
是否可以跨浏览器设置浏览器原生视频的控件样式，例如来自 HTML5 视频标签的视频？
I do not understand if it is possible or not, I can't find anything other than this articlebut it seem uses Javascript.
我不明白这是否可能，除了这篇文章我找不到其他任何东西，但它似乎使用了 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
上图的 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>
采纳答案by Ian Devlin
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.
您无法为浏览器的默认控件集设置样式，但您可以使用 (JavaScript) Media API 构建您自己的控件集，当然您可以以任何您喜欢的方式设置样式。
Take a look at Working with HTML5 multimedia components – Part 3: Custom controlswhich shows you how this can be done.
看看使用 HTML5 多媒体组件 - 第 3 部分：自定义控件，它向您展示了如何做到这一点。
回答by Kristian
Here is a good example for styling native player controls(just tested in Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn
这是一个很好的示例，用于设置原生播放器控件的样式（刚刚在 Chrome 中测试）：https: //codepen.io/BainjaminLafalize/pen/GiJwn
To change the width of the player controls bar:
要更改播放器控制栏的宽度：
video::-webkit-media-controls-panel {
width: 40px;
}
回答by Ryan Weiss
You can style native controls in some browsers, using shadow DOM. Enable shadow dom in debug inspector settings:
您可以使用 shadow DOM 在某些浏览器中设置本机控件的样式。在调试检查器设置中启用 shadow dom：
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
回答by Fabian von Ellerts
You could style the shadow DOM, but you need to look at every browser individually and a browser update could destroy your styling.
您可以为 shadow DOM 设置样式，但是您需要单独查看每个浏览器，并且浏览器更新可能会破坏您的样式。
I recommend taking a look at MediaElement.jswhich gives you cross-browser controls that can be styled using CSS and are already accessibility-optimized.
我建议您查看MediaElement.js，它为您提供了跨浏览器控件，这些控件可以使用 CSS 进行样式设置并且已经进行了可访问性优化。
Or if you only need a few controls anyway, build your own: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics
或者，如果您只需要一些控件，请构建自己的控件：https: //developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics
回答by Zach Saucier
Since you can't style the controls in every browser (namely Firefox), using custom controls is the way to go.
由于您无法在每个浏览器（即 Firefox）中设置控件的样式，因此使用自定义控件是可行的方法。
Writing your own is possible but takes some time and doesn't have the functionality that some other controls have.
编写您自己的控件是可能的，但需要一些时间并且没有其他一些控件所具有的功能。
I recommend Flowplayerwhich is very easy to use and style. It also has other useful features such as allowing you to control how the video is loaded (which is very useful for us since AWS S3 charges per view of the file).
我推荐Flowplayer，它非常易于使用和风格化。它还具有其他有用的功能，例如允许您控制视频的加载方式（这对我们非常有用，因为 AWS S3 对文件的每次查看收费）。
