Setup multiple resolution videos for quality selector
Nuevo plugin features a built-in option to switch between videos encoded with different resolution.You can setup multiple quality videos in two different ways: by video resolution or by 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>
Code snippet
var player = videojs("my_player");
player.nuevo({qualityMenu: true});
Code snippet
var player = videojs("my_player");
player.nuevo({video_id: "v-001"});
player.on('resolutionchange', function(event, data){
var video_id = data.id;
var resolution = data.res;
});
For HLS adaptive stream and live streaming resolution qualities are detected automically based on the HLS playlist media specification.
Examples: HLS steaming test, Live steaming test
Same concerns MPEG-Dash stream.
Example: Mpeg/Dash streaming Test
Quality selector for HLS and MPEG/DASH allows to set static quality/resolution and switch it back to auto selection. Quality selector is enough advanced to detect duplicated quality entries, showing both: resolution and bitrate when resolution is duplicated, but different bitrate, showing qualities by bitrate if resolution is missing for one of m3u8 entries.