CODEWITHSUNDEEP
htmlvideojwplayerresolutionvideo.js
Ural
Ural

Reputation: 385

HTML5 video player change quality on fullscreen

I need a very easy feature, and I thought every player have this. I need to switch quality of a video, when user clicks 'fullscreen'. And quality must fit screen size.

I have videos for 1080p, 720p, 480p, 360p, 240p. The default is 240p, the player window is small. I want when user go fullscreen, right resolution to be picked (like 1080p for 1920x1080 or 720p for lesser)

I read many information about available html5 players, and it seems that videojs and jwplayer are good. Videojs have a quality switcher feature, but not auto-switching on fullscreen. Jwplayer seems also don't support this.

Youtube support this many years. Is there any easy way to add such feature for existing player solution? (you can offer another html5 video player)

Thanks

Upvotes: 3

Views: 8886

Answers (1)

Ural
Ural

Reputation: 385

I resolved it with VideoJS and https://github.com/kmoskwiak/videojs-resolution-switcher/ plugin. I added labeled sources and this code:

player.on('fullscreenchange', function() {
        if(player.isFullscreen())
        {
            label='720p';
            if(screen.width>1280)
            label='1080p';              
            player.currentResolution(label);
        }
        else
            player.currentResolution('240p');
    });

Upvotes: 2

Related Questions