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>