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 by 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>



Video quality by SD/HD quality
Switch to SD/HD quality selector


<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 (m3u8 playlist) and MPEG-Dash stream resolution options are detected automically and quality picker appears automatically.