Videojs Quality Selector

STANDARD

PREMIUM

GOLD

The Nuevo plugin features a built-in option to switch between videos encoded in different resolutions.

For HLS or MPEG-DASH streams a quality menu appears automatically if only playlist document includes the URLs to multiple quality playlist variants of the same stream. The playback always starts in auto mode and adjusts video quality in real time depending on the strength of the network connection. The user can manually switch to the other static quality at any time later.

For standard progressive viseos (mp4,webm) the user can setup multiple-quality videos in two different ways: by video resolution or by a simple choice between SD and HD quality. For both, you can set the default video quality to play first.

Video quality resolution

Code snippet

<video id="example_video_1" class="video-js" controls preload="auto" width="640" height="360" poster="//domain.com/path/to/poster.jpg">
<source src="//www.domain.com/path/to/video_240p.mp4" type="video/mp4" res="240" label="240p" />
<source src="//www.domain.com/path/to/video_360p.mp4" type="video/mp4" res="360" label="360p" />
<source src="//www.domain.com/path/to/video_480p.mp4" type="video/mp4" res="480" default label="480p"/>
<source src="//www.domain.com/path/to/video_720p.mp4" type="video/mp4" res="720" label="720p"/>
</video>

Video quality by SD/HD quality

Code snippet

<video id="example_video_1" class="video-js" controls preload="auto" width="640" height="360" poster="//domain.com/path/to/poster.jpg">
<source src="//www.domain.com/path/to/video_hd.mp4" type="video/mp4" res="HD" label="HD" />
<source src="//www.domain.com/path/to/video_sd.mp4" type="video/mp4" default res="SD" label="SD" />
</video>

If you prefer to show the qualities menu in the settings menu instead of a separate qualities menu, you can enable the dedicated qualityMenu Nuevo plugin option.

Code snippet

const player = videojs("my_player", { license:"key" });
player.nuevo({qualityMenu: true});

The Nuevo plugin fires a resolutionchange event whenever the user switches the video quality manually. You can set a unique ID for your video to identify certain video and resolution that the user might have changed.

Code snippet

const player = videojs("my_player", { license:"key" });
player.nuevo({video_id: "v-001"});
player.on('resolutionchange', function(event, data){
var video_id = data.id;
var resolution = data.res;
});

For HLS or MPEG-DASH streams each quality item in the qualities menu shows both resolution and bitrate values, if only both are provided in the m3u8 or mpd playlist. The Nuevo plugin's option resOnly allows you to hide bitrate values and leave only resolution values for display, e.g.

Code snippet

player.nuevo({resOnly: true});