javascriptjwplayerjwplayer7

change logo and preview image size on full screen


I am using a pro version of Jwplayer. Can I change the size of the logo image for branding and the image size of the Video preview (VTT) in fullscreen mode ? I need to show bigger image in video preview when on fullscreen and smaller when restored. Same for my custom logo.

This the code I am using

  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();
            }
        }


    });

So It shows a video preview and a logo on left-top position. But it is always of fixed size. In Fullscreen or Not. Can I vary the size of video preview image (Like Youtube does) and the logo size.


Solution

  • Below the solution that is working today. For JWplayer 8 and others.

    //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');