Question

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

检测全屏事件并更改徽标图像的网址。
使用css在播放器加载时修改合适尺寸的图像尺寸，检测全屏事件并更改图像尺寸（使用任何css）并在播放器恢复时再次更改尺寸。

我欢迎任何建议和任何方法，只要它是可行的。因为我必须完成这件事。

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

Answer 1

注意：以下解决方案适用于播放器的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/

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

1 个答案: