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>