Html5视频标签，右上角定时器答案

【问题标题】：Html 5 video tag, timer at righ topHtml5视频标签，右上角定时器
【发布时间】：2021-04-06 08:51:41
【问题描述】：

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

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

【问题讨论】：

标签： html html5-video mraid

【解决方案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>

【讨论】：