jw player 6.7,当玩家全屏转动时更改徽标图像

时间:2016-12-08 10:47:00

标签: php html css jwplayer jwplayer6

我希望在播放器全屏显示时放大徽标,并在播放器尺寸恢复时将其更改为小尺寸。我可以想到以下方法:

  1. 检测全屏事件并更改徽标图像的网址。
  2. 使用css在播放器加载时修改合适尺寸的图像尺寸,检测全屏事件并更改图像尺寸(使用任何css)并在播放器恢复时再次更改尺寸。
  3. 我欢迎任何建议和任何方法,只要它是可行的。因为我必须完成这件事。

    注意:该方法适用于所有主流浏览器。

1 个答案:

答案 0 :(得分:0)

注意:以下解决方案适用于播放器的JW7 +版本。我强烈建议将播放器升级到第7版。

JW Player css皮肤模型内置了一个标志,用于检测播放器何时处于全屏模式:.jw-flag-fullscreen。使用该标志来定位徽标(.jw-logo),您将能够使用css调整大小并更改图像URL。以下是如何使用全屏标志的示例。

.jw-flag-fullscreen .jw-logo {
    background-image: url('logo.svg') !important;
    background-size: 100px;
    background-position: cover;
    width: 100px !important;
    height: 100px !important;
}

JS Fiddle example

您可以在JW Player CSS Skinning参考中找到更多信息。 https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/css-skinning/skins_reference/