Videojs Quality Selector

Setup multiple resolution videos for quality selector

Nuevo plugin has built-in feature 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 default video quality to play first.

Video quality resolution
<video id="example_video_1" class="video-js vjs-default-skin" 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>
		

Switch to SD/HD selector

Video quality by SD/HD quality
<video id="example_video_1" class="video-js vjs-default-skin" 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>
		


For HLS adaptive stream and live streaming resolution qualities is detected automically based on 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 aalows to set static quality/resolution and switch it back to auto selection. Quality selector is enough advanced to detect duplicated quality entries, show both: resolution and bitrate when resolution is duplicated but different bitrate, show qualities by bitrate if resolution is missing for one of m3u8 entries.