更改JWPlayer显示图标的不透明度(播放按钮)

时间:2015-03-07 23:03:42

标签: javascript css jwplayer

我想将JW播放器显示图标(播放按钮)的不透明度从1更改为.35并且想要避免制作自己的皮肤。我在这里的文档中没有看到任何关于不透明度或任何示例代码的内容:http://support.jwplayer.com/customer/portal/articles/1413071-skin-xml-reference#dispaly

通过查找jwdisplayIcon类并更改不透明度,我可以轻松更改Chrome开发工具中的不透明度。在Chrome控制台中运行此行也可以:

$('.jwdisplayIcon').css('opacity', '.35');

但我尝试在JavaScript中添加相同的行,但它没有用。我也尝试将以下内容添加到我的CSS中,但它没有工作:

.jwdisplayIcon {
  opacity: .35;
}

这是我拥有的继承设置:

    jwplayer("expert-video").setup({
        sources: [
          {% for media in medias %}
            {file: "{{ media.media.url }}", label: "{{ media.name }}"},
          {% endfor %}
        ],
        {% if expert.media_poster %}
          image: "{{ expert.media_poster.url }}",
        {% endif %}
        width: "100%",
        aspectratio: "16:9",
        abouttext: "© Copyright 2014",
        aboutlink: "http://example.com",
        skin: "vapor"
      });

似乎这个JavaScript设置可以进行更改,但我不知道要添加什么。我尝试将以下行添加到设置中,但浏览器在'()'上抛出了一个意外的令牌。 (看起来这只能在事件中调用?):

jwplayer().getPlugin("display").style.opacity='.35';

我尝试将以下内容添加到我的设置中,即使它会针对整个播放器而不仅仅是显示图标,并且它根本不做任何事情:

opacity: ".35",

我发现this JSFiddle与JW Player一起玩,并将icons: false更改为以下内容,但它不起作用:

 icons: {
     opacity: .35,
 }

在不构建新皮肤的情况下,我需要做些什么来改变不透明度?

1 个答案:

答案 0 :(得分:1)

您应该在photoshop或其他图像编辑程序中制作图形并更改其中的不透明度。

这样它可以在播放器,Flash或HTML5中的两种渲染模式下工作。

这里的CSS工作只适用于HTML5播放器。

是的,为了做到这一点,你必须建立一个新的皮肤,我很害怕。