JW Player 7 Controllbar 样式问题 - 如何摆脱边框？

Question

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

我正在使用 "seven" 主题。这是我的主题设置。

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)" 作为背景。

"skin": { 名称: "seven", 活动: "#ff2b2b", 非活动: "#fff", 背景: "rgba(0,0,0,.5)" }

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

如果我将其设置为 100% 透明，那么边框就会消失。但问题是任何带有白色 BG 的视频都会使控制栏不可见。所以我想要 50% 的透明度。

我尝试了 JW Player skin reference 中的各种选项，但没有任何帮助。

知道如何实现吗？

Answer 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;
}

声明 class 两次确实有效，我忘了我是怎么发现的，而且它没有记录，或者我找不到调用正确搜索的关键术语。

Answer 2

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

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

.jw-skin-seven .jw-slider-time{ background:transparent!important;}

JW Player 7 Controllbar 样式问题 - 如何摆脱边框？

JW Player 7 Controllbar styling issue - how do I get rid of the border?

jwplayer

jwplayer7