Video quality switcher

Video Player is loading.
Advertisement
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
1x
  • Chapters
  • descriptions off, selected
  • captions off, selected
    x
    ZOOM HELP
    Drag zoomed area using your mouse.
    100%

    Code Setup

    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%
    Stream Type LIVE
    Remaining Time 0:00
    1x
    • Chapters
    • descriptions off, selected
    • captions off, selected
      x
      ZOOM HELP
      Drag zoomed area using your mouse.
      100%

      Code Setup

      	var player2 = videojs('player_2');
      	player2.nuevo({ 
      		resOnly:true,
      		//option2: value,
      		//option3: value
      	});
      	
      

      Qualities menu as Settings submenu

      Video Player is loading.
      Advertisement
      Current Time 0:00
      Duration 0:00
      Loaded: 0%
      Stream Type LIVE
      Remaining Time 0:00
      1x
      • Chapters
      • descriptions off, selected
      • captions off, selected
        x
        ZOOM HELP
        Drag zoomed area using your mouse.
        100%

        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>