Video quality switcher

Code Setup

<!--Head tag CSS-->
<link href="../videojs/skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />

<!--Load player and Nuevo plugin-->
<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/poster.jpg">
	<source src="//opencdn.b-cdn.net/video/demo_240.mp4" res="240" label="240p" type="video/mp4">
	<source src="//opencdn.b-cdn.net/video/demo_360.mp4" res="360" label="360p" type="video/mp4">
	<source src="//opencdn.b-cdn.net/video/demo_480.mp4" res="480" label="480p" default type="video/mp4">
	<source src="//opencdn.b-cdn.net/video/demo_720.mp4" res="720" label="720p" 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>

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 manipulate stream quality manually, not possible to display qualities menu items. iOS does not support MPEG DASH type of streaming at all.