JSFiddle - React, Tailwind, and code Playground

by djp3d

HTML

<script src="//vjs.zencdn.net/5.10.7/video.js"></script>
<link rel="stylesheet" href="https://vjs.zencdn.net/5.8.8/video-js.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//rawgit.com/mkhazov/videojs-resolution-switcher/master/lib/videojs-resolution-switcher.js"></script>
<script src="https://videojs.github.io/videojs-contrib-hls/node_modules/videojs-contrib-hls/dist/videojs.hls.min.js"></script>
<body>
<video id="video" class="video-js vjs-default-skin"
       controls
       preload="none"
       autoplay
       loop
       muted
       width="640" height="360"
       poster="https://vjs.zencdn.net/v/oceans.png">
</video>
</body>

CSS

.cue-display span.cue {
    color: yellow !important;
}
::cue {
    color: yellow  !important;
}
::cue(.small) {
    font-size: 80%  !important;
}
.cue-display span.cue .small {
    font-size: 80% !important;
}
::cue(.customstyle) {
    color: red;
    font: bold;
}
.cue-display span.cue .customstyle {
    color: red;
    font: bold;
}



.video-js .vjs-captions {
  color: #FFFFFF;
  font-family: 'tahoma' !important;
  font-size: 16px;
}

.video-js .vjs-text-track {
  background-color: transparent;
}

JavaScript

var sources = [{"src":"http://d3ofmqupu6dvco.cloudfront.net/vodorigin/_definst_/mp4:amazons3/writemedia-sportzone-sportzonewalesrfc/a991d7d9-66ce-15c6-db5e-8c7dd2d4aa6b.mp4/playlist.m3u8","type":"application/x-mpegURL","label":"Camera 2","res":720,"poster":"/api/StreamVideos/GetStreamVideoReportPoster/a991d7d9-66ce-15c6-db5e-8c7dd2d4aa6b"},{"src":"http://d3ofmqupu6dvco.cloudfront.net/vodorigin/_definst_/mp4:amazons3/writemedia-sportzone-sportzonewalesrfc/ad94b2c6-8ca0-174e-4236-9063fc0319b7.mp4/playlist.m3u8","type":"application/x-mpegURL","label":"Camera 0","res":720,"poster":"/api/StreamVideos/GetStreamVideoReportPoster/ad94b2c6-8ca0-174e-4236-9063fc0319b7"},{"src":"http://d3ofmqupu6dvco.cloudfront.net/vodorigin/_definst_/mp4:amazons3/writemedia-sportzone-sportzonewalesrfc/3bf10919-4cb0-df0b-ce6d-d9a1df013c1d.mp4/playlist.m3u8","type":"application/x-mpegURL","label":"Camera 1","res":720,"poster":"/api/StreamVideos/GetStreamVideoReportPoster/3bf10919-4cb0-df0b-ce6d-d9a1df013c1d"},{"src":"http://d3ofmqupu6dvco.cloudfront.net/vodorigin/_definst_/mp4:amazons3/writemedia-sportzone-sportzonewalesrfc/70f2f91b-48ba-dbcd-c08e-e66136fe747d.mp4/playlist.m3u8","type":"application/x-mpegURL","label":"Camera 3","res":720,"poster":"/api/StreamVideos/GetStreamVideoReportPoster/70f2f91b-48ba-dbcd-c08e-e66136fe747d"}];
/*
videojs.Hls.isSupported = function() {

  return !videojs.Hls.supportsNativeHls &&
    videojs.Flash.isSupported() &&
    videojs.MediaSource &&
    window.Uint8Array;
};
*/

    // fire up the plugin
    videojs('video', {
      controls: true,
      muted: true,
      plugins: {
        videoJsResolutionSwitcher: {
          dynamicLabel: true // Display dynamic labels or gear symbol
        }
      }
    }, function(){
      var player = this;
      window.player = player;

			player.updateSrc(sources);
      
      var track = player.addTextTrack("captions", "English", "en");
      track.addCue(new VTTCue(1, 18, "This caption should be visible in...