Qualities menu appears automatically if only multiple resolution variants of media are defianed.
<!--Load player and Nuevo plugin with skin -->
<link href="../skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />
<script src="../video.min.js"></script>
<script src="../nuevo.min.js"></script>
<!--Multiple reslolution video on page setup-->
<video id="player_1" class="video-js vjs-fluid" controls preload playsinline poster="../examples/assets/images/coffee.jpg">
<source src="//opencdn.b-cdn.net/video/hls/people/playlist.m3u8" type="application/x-mpegURL">
</video>
<!--Initialize player and plugin-->
<script>
var player = videojs('player_1');
player.nuevo({
//option1: value,
//option2: value
});
</script>
Resolution only display
By default you can see both: resolution and bitrate values in qualities menu. You can order to display resolution only.
Code Setup
var player2 = videojs('player_2');
player2.nuevo({
resOnly:true,
//option2: value,
//option3: value
});
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 player3 = videojs('player_3');
player3.nuevo({
qualityMenu: true,
});
</script>