1

我正在尝试自定义控制栏背景。我需要为控制栏获得透明背景

我正在使用“七”主题。这是我的主题设置。

jwplayer("container").setup({                
                    "width": 848,
                    "height": 477,
                    "type": "mp4",
                    "autostart": auto,
                    "provider": "video",                    
                    "file": VIDEO_PATH,
                    "image": THMB_PATH,
                    "skin": { name: "seven", active: "#ff2b2b", inactive: "#fff", background: "rgba(0,0,0,.5)" },
                    "events": { "onReady": function () { vv.setPlayerStatus("Ready"); } },
                    "modes": [
                      { "type": "html5" },
                      { "type": "flash", src: "/content/js/webcam/new/jwplayer.flash.swf" },
                      { "type": "download" }
                    ]                    
                });

如您所见，我使用背景：“rgba(0,0,0,.5)”作为背景。

“皮肤”：{名称：“七”，活动：“#ff2b2b”，非活动：“#fff”，背景：“rgba（0,0,0,.5）”}

这可行，但我看到水平滑块顶部和底部的边框较暗，如图所示（见红色箭头）

在此处输入图像描述

如果我让它 100% 透明，那么边框就会消失。但问题是任何带有白色 BG 的视频都会使 controllbar 不可见。所以我想要 50% 的透明度。

我尝试了JW Player 皮肤参考中的各种选项，但没有任何帮助。

知道如何实现这一目标吗？

4

2 回答 2

2

您需要专门针对时间滑块组件并使其透明。这将允许应用于父控件栏的 50% 透明度生效。

此外，由于 JW 样式是动态添加的，它们将出现在您的样式之后 - 稍后在样式级联中 - 因此，为了使您的声明得到尊重，您需要包含“！important”标志：

.jw-skin-seven .jw-slider-time{ background:transparent!important;}
于 2015-12-20T18:29:03.773 回答
1

尝试：

CSS

.jw-skin-seven .jw-slider-horizontal,
.jw-skin-seven .jw-slider-container, 
.jw-skin-seven .jw-rail { 
    border: 0 none rgba(0,0,0,.5); 
    background-color: rgba(0,0,0,.5); 
    outline: 0 none rgba(0,0,0,0);
}

如果这不起作用，请使用!important 

.jw-skin-seven .jw-slider-horizontal,
.jw-skin-seven .jw-slider-container, 
.jw-skin-seven .jw-rail { 
    border: 0 none rgba(0,0,0,.5) !important; 
    background-color: rgba(0,0,0,.5) !important; 
    outline: 0 none rgba(0,0,0,0) !important;
}

如果这不起作用，请尝试

.jw-skin-seven .jw-slider-horizontal.jw-slider-horizontal,
.jw-skin-seven .jw-slider-container.jw-slider-container, 
.jw-skin-seven .jw-rail.jw-rail { 
    border: 0 none rgba(0,0,0,.5) !important; 
    background-color: rgba(0,0,0,.5) !important; 
    outline: 0 none rgba(0,0,0,0) !important;
}

两次声明一个类实际上是有效的，我忘记了我是如何发现这一点的，而且它没有记录，或者我找不到调用正确搜索的关键术语。

于 2015-12-19T21:58:56.917 回答