Html 5 个视频标签，计时器在右上角

Question

我正在尝试为视频添加倒数计时器。

<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>

Answer 1

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>

Html 5 个视频标签，计时器在右上角

Html 5 video tag, timer at righ top

html

html5-video

mraid