Video quality switcher

Code Setup


<!--Load player and Nuevo plugin with skin -->
<link href="../videojs/skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />
<script src="../videojs/video.min.js"></script>
<script src="../videojs/skins/nuevo/nuevo.min.js"></script>

<!--Multiple reslolution video on page setup-->
<video id="player_1" class="video-js vjs-fluid" controls preload playsinline poster="images/people.jpg">
	<source src="//opencdn.b-cdn.net/video/people_240.mp4" res="240" label="240p" type="video/mp4">
	<source src="//opencdn.b-cdn.net/video/people_360.mp4" res="360" default label="360p" type="video/mp4">
	<source src="//opencdn.b-cdn.net/video/people_720.mp4" res="720" label="720p" type="video/mp4">
	<source src="//opencdn.b-cdn.net/video/people_480.mp4" res="1080" label="1080p" type="video/mp4">
</video>

<!--Initialize player and plugin-->
<script>
	var player = videojs('player_1');
	player.nuevo({ 
		//option1: value,
		//option2: value
	});
</script>

SD/HD Quality Switcher


Code Setup

<!--HD/SD quality video on page setup-->
<video id="player_1" class="video-js vjs-fluid" controls preload playsinline poster="images/poster.jpg">
	<source src="//opencdn.b-cdn.net/video/demo_360.mp4" res="SD" label="SD" default type="video/mp4">
	<source src="//opencdn.b-cdn.net/video/demo_720.mp4" res="HD" label="HD" type="video/mp4">
</video>

Showing Qualities menu as Settings submenu


By default qualities menu is displayed separately in control bar. You can also order to display it as setting submenu by setting nuevo plugin option qualityMenu: true.

Code Setup

<script>
	var player = videojs('player_1');
	player.nuevo({ 
	    qualityMenu: true,
	});
</script>

The HD or 4K icon appears for videos of minimum 1080p resolution. This is what Youtube apply as well.
HD icon for resolution > 720 hase been depreciated, however the user may still decide about minimum resolution to show HD icon.
<script>
	var player = videojs('player_1');
	player.nuevo({ 
	    minhd: 720
	});
</script>
For HLS and MPEG-DASH streams quality switcher appears automatically if only multiple variants of media defined in playlist file.
iOS is missing Media Source Extension, use only native HLS streaming and does not allow to read, populate and switch quality manually. iOS does not support MPEG/DASH type of streaming at all.