JSFiddle - React, Tailwind, and code Playground

HTML

<video id="v" controls>
    <source id='mp4'
    src="https://videos.footballia.net/uploads/video/source_file/17882/1970CheLeeRP1st.mp4"
    type='video/mp4'>
    <source id='webm'
    src="https://videos.footballia.net/uploads/video/source_file/17882/1970CheLeeRP1st.webm"
    type='video/webm'>
    <source id='ogv'
    src="https://videos.footballia.net/uploads/video/source_file/17882/1970CheLeeRP1st.ogv"
    type='video/ogg'>
    <p>Your user agent does not support the HTML5 Video element.</p>


  </video>
  <div id="overlay1">1 Bonetti<br>2 Harris<br>3 McCreadie<br>4 Hollins<br>5 Dempsey<br>6 Webb<br>7 Baldwin<br>8 Cooke<br>9 Osgood<br>10 Hutchinson<br>11 Houseman<br><br>12 Hinton </div>
  
    <div id="overlay2">1 Harvey<br>2 Madeley<br>3 Cooper<br>4 Bremner<br>5 Charlton<br>6 Hunter<br>7 Lorimer<br>8 Clarke<br>9 Jones<br>10 Giles<br>11 Gray </div>

CSS

#overlay1 {
  position: absolute; 
  top: 000px; 
  left: -110px;
  color: #00F; 
  text-align: left;
  font-size: 20px;
  width: 640px;
  padding: 10px 0;
  z-index: 2147483647;
}

 #overlay2 {
  position: absolute; 
  top: 000px; 
  left: 650px;
  color: #00F; 
  text-align: left;
  font-size: 20px;
  width: 640px;
  padding: 10px 0;
  z-index: 2147483647;
}


#v {
  z-index: 1;
}

JavaScript

var overlay= document.getElementById('overlay');
  var video= document.getElementById('v');
  video.addEventListener('progress', function() {
    var show= video.currentTime>=5 && video.currentTime<10;
    overlay.style.visibility= show? 'visible' : 'visible';
  }, false);