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.
Video Player is loading.
Advertisement
Current Time 0:00
/
Duration 0:00
Loaded: 0%
0:00
Stream Type LIVE
Remaining Time -0:00
1x
2x
1.5x
1.25x
1x, selected
0.5x
Chapters
descriptions off, selected
captions settings, opens captions settings dialog
captions off, selected
Quality
HDSettings
Settings
Share
Zoom100%
SpeedNormal
Speed
0.5x
1x
1.25x
1.5x
2x
Zoom
Reset
This is a modal window.
Beginning of dialog window. Escape will cancel and close the window.
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>