JSFiddle - React, Tailwind, and code Playground

by Lhankor_Mhy

HTML

<video id="target" type="video/mp4" src="http://etc.dounokouno.com/testmovie/h264/testmovie-480x272.mp4" width="480" height="272" autoplay autobuffer></video>
<div id="_4">4秒</div>
<div id="_6">6秒</div>
<div id="_8">8秒</div>

CSS

div{
  position:absolute;
  padding:5px;
  border-radius:5px;
  color:white;
  background:DarkRed;
  opacity:0.5;
  display:none;
}
.show{
  display:block;
}
#_4{
  left:100px;
  top:100px;
}
#_6{
  left:200px;
  top:200px;
}
#_8{
  left:400px;
  top:150px;
}

JavaScript

const target = document.getElementById('target');
const resume = id => {
  const button = document.getElementById(id);
  button.addEventListener('click', e => {
    target.play();
    button.classList.remove('show');
  }, {once:true});
  button.classList.add('show');
}
  
const timer = [
  {time:4, id:'_4'},
  {time:6, id:'_6'},
  {time:8, id:'_8'},
  {time:99, id:''},
];
let i = 0;

target.addEventListener('timeupdate', e=>{
  if ( e.target.currentTime > timer[i].time ) {
    e.target.pause();
    resume(timer[i].id);
    i++;
  }
});