JSFiddle - React, Tailwind, and code Playground

by djp3d

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/video-js.css">
<script src="https://unpkg.com/[email protected]/dist/video.js"></script>
<script src="https://unpkg.com/[email protected]/dist/videojs-contrib-hls.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-resolution-switcher/0.4.2/videojs-resolution-switcher.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-resolution-switcher/0.4.2/videojs-resolution-switcher.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="wrapper container">
  <div class="row">
    <div class="col-md-12">
      <div class="videocontent">
        <video id="player" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="true" width="640" height="264">
        </video>
      </div>
    </div>
  </div>
</div>

CSS

.vjs-resolution-button-label {
  line-height: 3em;
}    

.vjs-menu-content li {
  text-transform: uppercase !important;
}

JavaScript

videojs('player', {
  plugins: {
    videoJsResolutionSwitcher: {
      default: 'high',
      dynamicLabel: true
    }
  }
}, function() {
  var player = this;
  
    player.updateSrc([{
      src: 'https://cdn3.wowza.com/1/eHVQL0RPZERsL0kz/cEhKUGZ0/hls/live/playlist.m3u8',
      type: 'application/x-mpegURL',
      res: 576,
      label: 'auto'
    },{
      src: 'https://cdn3.wowza.com/1/eHVQL0RPZERsL0kz/cEhKUGZ0/hls/sqx2p9hg/448/chunklist.m3u8',
      type: 'application/x-mpegURL',
      res: 180,
      label: 'LOW'
    },
    {
      src: 'https://cdn3.wowza.com/1/eHVQL0RPZERsL0kz/cEhKUGZ0/hls/sqx2p9hg/728/chunklist.m3u8',
      type: 'application/x-mpegURL',
      res: 360,
      label: 'SD'
    },
    {
      src: 'https://cdn3.wowza.com/1/eHVQL0RPZERsL0kz/cEhKUGZ0/hls/sqx2p9hg/1028/chunklist.m3u8',
      type: 'application/x-mpegURL',
      res: 404,
      label: 'HD'
    }
  ])
  
  
  player.on('resolutionchange', function() {
    console.info('Source changed')
    //player.play();
    
    
  });
  

  
  
});