Question

我正在使用专业版的Jwplayer。我可以在全屏模式下更改品牌标识图像的大小和视频预览（VTT）的图像大小吗？我需要在全屏时在视频预览中显示更大的图像，在恢复时显示更小的图像。我的自定义徽标也是如此。

这是我正在使用的代码

  jwplayer("container").setup({
        sources: [{
            file: "http://15.20.19.73:1935/vod/smil:pls183.smil/jwplayer.smil"
        }],
        tracks: [{
            file: "http://15.20.19.73/video_vtt/thumbs/183.mp_vtt/183.mp_thumbs.vtt",
            kind: "thumbnails"
        }],

        events: {
            onComplete: function() {
                endHandler();
            }
        }


    });

因此它显示了视频预览和左上角的徽标。但它总是固定的大小。在全屏或不在。我可以改变视频预览图像的大小（像Youtube一样）和徽标大小。

Answer 1

您可以使用CSS中的.jw-flad-fullscreen类在全屏设置自定义徽标。

.jw-flag-fullscreen .jw-logo {
      width: 150px !important;
      height: 150px !important;
    }

CSS参考：https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/css-skinning/skins_reference/

JW Player的视频转码输出静态120px宽度尺寸的缩略图，因此您无法以相同的方式调整缩略图大小：http://assets-jpcust.jwpsrv.com/strips/92XQ91bP-120.jpg

Answer 2

在今天有效的解决方案下方。适用于 JWplayer 8 等。

//name player div...
var playerInstance = jwplayer("player");

//Set start logo...
playerInstance.setup({
    file: '//gticontrol.com/video.m3u8',
    repeat: true,
    autostart: shouldAutostart,
        "logo": {
        "file": "https://gticontrol.com/br_tnt_m.png",
        "hide": "true",
        "position": "top-left"
        }             
});

//Creat function to change logo
function changeLogo(playerId, logoUrl){
    var logoElem = document.querySelector('#'+playerId + ' .jw-logo');
    logoElem.style.backgroundImage='url('+logoUrl+')';
};

//Call If need change logo...
changeLogo(playerInstance.id, 'https://gticontrol.com/mx_hbo-2_m.png');

在全屏幕上更改徽标和预览图像大小

2 个答案: