JSFiddle - React, Tailwind, and code Playground

forked from p2m8dzLc msnbc 796k videojs-adding number input box_v01m - forked from dledle2/h17gozru/ - 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

<!--
msnbc 796k videojs-adding number input box_v01m - forked from dledle2/h17gozru/ - 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
   // -->
<!-- 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 src='//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.8.3/videojs-contrib-hls.min.js'></script>
 
 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<!-- removed http://vjs.zencdn.net/4.8/video.js  
http://dev.aovivonaweb.tv/player.aovivonaweb.tv/videojs-contrib-hls/src/videojs-hls.js
// -->

<div id='myDIVsetVideoTime' class='myDIVsetVideoTime' style='zIndexZZZ:1000;'>

set video.currentTime to (in seconds):<br>
<input type='text' class='textfield' value='300' id='extra7' name='extra7' onkeypress='try{   var aa=document.getElementById("video").querySelectorAll("video")[0];   var bb=document.querySelectorAll("#extra7")[0]; parseInt(bb.value); aa.currentTime=parseInt(bb.value);    /* aa.currentTime=300; */ 
   /*  yes below logic is meaningless */   if(aa.seeking===false){   aa.play();   } else{aa.play();     }     }catch(e){}             ;     function isNumber(evt){evt=(evt)?evt:window.event;var charCode=(evt.which)?evt.which:evt.keyCode;if(charCode>31&&(charCode<48||charCode>57)){return false}return true} ;                                  return isNumber(event)' />
<br>
set video.currentTime to (in minutes):<br>
<input type='text' class='textfield' value='5' id='extra8' name='extra8'...

CSS

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

button, input[type="button"], input[type="submit"] { 
    -webkit-appearance: none;
    height: 75px;
    background-color:#FFF;
    color:#666;
    font-weight:bold;
    border: solid #666 1px;
    font-size: 14px;
}

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

.videoZZ.video{ display: none !important;}
#videoZ#videoZ{ display: none !important;}
#videoZ.videoZ{  display: none; pointer-events:none;}
.videoZ{  pointer-events:none;}
#video videoYYY{ pointer-events:none;}

#video > div.vjs-text-track-displayZ{display: none;       !important; }
#video div.vjs-text-track-displayZ{display: none;       !important; }

.vjs-text-track-display{display: none; !important;}

/* 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){}  */








function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which :...