htmlhtml5-videomraid

Html 5 video tag, timer at righ top


I'm trying add a countdown timer to video.

<div id="container" style="width:100%;height:100%;background-color:black;text-align:center;margin: 0 auto;">
    <video id="video" onclick="..." style=";margin:0 auto;" poster="noposter" src="..." webkit-playsinline></video>
</div>

Solution

  • var currtime = 45;
    function ticktock() {
      currtime--;
      document.getElementById("timer").innerHTML = currtime;
      if (currtime <= 0) {
        clearInterval(interval);
      }
    }
    var interval = setInterval(ticktock, 1000);
    #timer {
      position: absolute;
      right: 10px;
      top: 10px;
      background-color: #000;
      color: #fff;
      width: 20px;
      height: 20px;
      font-size: 14px;
      border-radius: 50px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    <div id="container" style="width:100%;height:100%;background-color:black;text-align:center;margin: 0 auto;">
        <video id="video" onclick="..." style=";margin:0 auto;" poster="noposter" src="..." webkit-playsinline></video>
    </div>
    
    <div id="timer"></div>