更改 Mediaelements.js 播放器的颜色

Question

如何更改 mediaelements.js 播放器的颜色？它是黑色的，但我需要将其更改为蓝色...

理想情况下，我希望黑色背景是透明的，只显示进度条。

Answer 1

您只需更改 src/css 中名为 mediaelementplayer.css 的 css 文件中的几行：

首先找到行 .mejs-container { 然后注释掉 background-color 属性像这样：

/*background: #000;*/

接下来，找到行 .mejs-container .mejs-controls {，应该在 150。然后删除所有背景属性，这些属性：

background: url(background.png);
background: rgba(0, 0, 0, 0.7);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));

将它们替换为以下行：

background: transparent;

让您使用正确的 css 文件，其中的属性已更改。

Answer 2

我的解决方案 -- 确保在媒体元素的默认样式之后插入此样式。它将覆盖之前设置的背景图像，控制栏背景颜色：

    .mejs-container .mejs-controls {
        background: red;
    }

更改 Mediaelements.js 播放器的颜色

Change the colour of Mediaelements.js player

javascript

html5-audio

mediaelement.js