HTML5视频媒体控制面板定制

Question

我有一点难题。我正在尝试更改 HTML5 视频播放器中媒体控制面板的形状，到目前为止，我唯一能影响的就是背景颜色。

这是 CSS 元素：

video::-webkit-media-controls-panel {
     background-color: #bbb;
}

<video width="350" height="240">
<source src="file-path" type="video/mp4">
</video>

问题是无论我尝试什么，都是这个默认的、难看的灰色控制面板

我该如何改变它？我想更改高度、宽度和边框半径。

CSS 首选。

谢谢

边界半径，我试过了

-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;

...但它不起作用，即使有 !important 标志。

我也尝试过使用高度来影响高度，但是高度也不起作用。

Answer 1

“我正在尝试更改 HTML5 视频播放器中媒体控制面板的形状”

我建议您只关闭

controls

并创建您自己的自定义图形，这些图形放置在（容器内）与视频对象本身相同的 Div 中。通过他们容器的样式，他们可以覆盖在视频对象之上。

“我想改变
height
、
width
和
border-radius
。”

在

video::-webkit-media-controls ...

部分，

height 在
```
-panel
```
参数中调整。
宽度在
```
-enclosure
```
参数调整。

例如：

<style>

video::-webkit-media-controls-panel 
{
    background-color: rgb(255, 0, 255);
    border-radius: 10%;
    height: 30%;
}

video::-webkit-media-controls-enclosure
{
    width: 90%;
}

</style>

更完整的例子：

<!DOCTYPE html>
<html>

<style>

video::-webkit-media-controls-panel 
{
    background-color: rgb(255, 0, 255);
    border-radius: 10%;
    height: 30%;

    position: absolute;
    top: 40%;
    left: 20%;
}

video::-webkit-media-controls-enclosure
{
    width: 90%;
}

</style>

<body>

<video width="350" height="240" oncontextmenu="return false;"
playsinline muted autoplay loop
disablepictureinpicture
controls controlsList="nodownload noplaybackrate noremoteplayback ">
<source src="file-path" type="video/mp4">
</video>

</body>
</html>

Answer 2

问题已解决： 感谢 VC-One 的回复，我能够解决问题，但不是通过禁用控件和创建我自己的按钮，而是通过将 video::-webkit-media-controls-enclosure 添加到CSS.

当我开始自定义 HTML5 播放器时，我从一个 HTML5 视频页面中获取了参数，但是 video::-webkit-media-controls-enclosure 不是其中一项。当 VC-One 在他的回复中指出高度在面板中而宽度在外壳中时，我能够通过像这样调整我的 css 来解决问题：

video::-webkit-media-controls-enclosure {
    width:100%;
    background-color:transparent;
    -moz-border-radius: 1px !important;
    -webkit-border-radius: 1px !important;
    border-radius: 1px !important;
    filter: alpha(opacity=80);
    opacity: 0.8;
    margin-bottom:-20px;
    overflow: hidden;
}
video::-webkit-media-controls-panel {
    background-color: #eee;
    height:35px !important;
}

我将围栏背景设为透明，并在面板中设置背景颜色，并调整所有其他元素，包括围栏中的边框半径。

现在我的网站上有一个漂亮的播放器！

谢谢大家，尤其是VC-One。

HTML5视频媒体控制面板定制

问题描述投票：0回答：2

2个回答

最新问题

HTML5视频媒体控制面板定制

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2