Question

这是我为mediaelementjs播放器控件添加.png文件时得到的图像，SVG不起作用。为什么我得到这个？

以下是一些用于

的CSS代码

.mejs-container .mejs-controls {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    bottom: 0;
    left: 0;
    background: url(mediajselement/background.svg);
    background-repeat: no-repeat;
    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));   
    height: 30px;
    width: 100%;
}
.mejs-container .mejs-controls  div {
    list-style-type: none;
    background: url(mediajselement/controls.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 26px;
    height: 26px;
    font-size: 11px;
    line-height: 11px;
    font-family: Helvetica, Arial;
    border: 0;
}

.mejs-controls .mejs-button button {
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    margin: 7px 5px;
    padding: 0;
    position: absolute;
    height: 16px;
    width: 16px;
    border: 0;
    background: transparent url(mediajselement/controls.svg);
}

.no-svg .mejs-controls .mejs-button button { 
    background-image: url(mediajselement/controls.png);
}

这也没有用，.htaccess -

AddType image/svg+xml svg
AddType image/svg+xml svgz

或者

AddType image/svg+xml svg svgz
AddEncoding gzip svg

到目前为止，我在每个可以设置的目录中都有controls.png和controls.svg，我已经尝试了每个位置。这是令人费解的。

某些事情确实是错误的，因为我在其他系统上使用这个玩家的确切配置，它的工作方式就是这样，人们不得不去做这件事真是太可惜了。）

Answer 1

修改

快速浏览一下mejs source css，你可能需要这些styles

我可能在这里忽略了这一点，因为我对svg不太熟悉，我认为背景图像属性看起来有点奇怪，

尝试以下

.mejs-container .mejs-controls div { list-style-type: none; background-image: url(mediajselement/controls.svg); background-repeat: no-repeat; display: block; float: left; margin: 0; padding: 0; width: 26px; height: 26px; font-size: 11px; line-height: 11px; font-family: Helvetica, Arial; border: 0; } .mejs-controls .mejs-button button { cursor: pointer; display: block; font-size: 0; line-height: 0; text-decoration: none; margin: 7px 5px; padding: 0; position: absolute; height: 16px; width: 16px; border: 0; background-image: url(mediajselement/controls.svg); background-color: transparent; background-repeat: no-repeat; }

mediaelementjs - 视频播放器错误控制

1 个答案: