JSFiddle - React, Tailwind, and code Playground

also added JS to hide a div to enable easier video right clicking to show controls - videojs that you can then right click to show controls THEN you can rewind 30 minutes if you can find the slider to drag

by dledle2

HTML

<link rel="stylesheet" href="http://vjs.zencdn.net/4.8/video-js.css">
<script src="http://player.aovivonaweb.tv/videojs-contrib-media-sources/src/videojs-media-sources.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/xhr.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/flv-tag.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/exp-golomb.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/h264-stream.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/segment-parser.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/stream.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/m3u8/m3u8-parser.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/playlist-loader.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/node_modules/pkcs7/dist/pkcs7.unpad.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/decrypter.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/bin-utils.js"></script>
<script src="http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/aac-stream.js"></script>
<!-- now im trying to add this feature next...
https://stackoverflow.com/questions/41953604/html5-video-custom-additional-seek-bar
-->

<script src="//cdnjs.cloudflare.com/ajax/libs/video.js/6.2.5/video.min.js"></script>
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/dashjs/2.5.0/dash.all.min.js"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.9.1/videojs-dash.min.js"></script>
 
<script...

CSS

/* https://stackoverflow.com/questions/41953604/html5-video-custom-additional-seek-bar */

#custom-seekbar
{  
  cursor: pointer;
  height: 10px;
  margin-bottom: 10px;
  outline: thin solid orange;
  overflow: hidden;
  position: relative;
  width: 400px;
}
#custom-seekbar span
{
  background-color: orange;
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 0px;
}

/* following rule is for hiding Stack Overflow's console  */
.as-console-wrapper{ display: none !important;}

JavaScript

if (location.protocol != 'http:') {
  
try{location.href = 'http:' + window.location.href.substring(window.location.protocol.length);    }catch(e){}}




/* myStrURL= */
/* try{window.open(myStrURL , '' , '');    }catch(e){} */
window.boolWindowOpenedSuccessfullyAlready = false;

function inIframe () {
    try {
        /* below command will cause a permissions error when using iframes */ 
        /* and will break into the catch part for error handling           */
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

function isURLjsfiddleshowlight () {
   if (       document.location.href.toLowerCase().contains('/show/light/')       )
      {return true;}
   else
      {return false;}
   /* below end bracket: end of function: isURLjsfiddleshowlight*/
}


try{
if (inIframe() === true){
   if (window.open(window.location.href)){window.boolWindowOpenedSuccessfullyAlready=true;}  
}
/* if (isURLjsfiddleshowlight() != true){window.open(window.location.href);    }  */
}catch(e){}
/* alert(window.boolWindowOpenedSuccessfullyAlready);    */




function myFuncinIframeAndAlsoWindowOpenSameFunction() {

if (typeof window.boolWindowOpenedSuccessfullyAlready == 'undefined')
{ window.boolWindowOpenedSuccessfullyAlready=false; }

console.log(window.boolWindowOpenedSuccessfullyAlready);
if (window.boolWindowOpenedSuccessfullyAlready ===false) {
   try {
      if(window.self !== window.top){
         if (window.open(window.location.href)){window.boolWindowOpenedSuccessfullyAlready=true;}
         /*   */ 
      }
   }catch(e){}
}
console.log(window.boolWindowOpenedSuccessfullyAlready);
   /* below end bracket: end of function: myFuncinIframeAndAlsoWindowOpenSameFunction */
}


myFuncinIframeAndAlsoWindowOpenSameFunction();

/* myStrURL=window.location.href;  */
/* try{window.open(myStrURL , '' , '');    }catch(e){}  */











//videojs.options.flash.swf = 'http://vjs.zencdn.net/4.8/video-js.swf';
// initialize the player
/* var player...