javascript - HTML5 视频结束倒计时

Question

我可以为 HTML5 视频结束倒计时吗？

<video id="video" width="400" height="225" preload="auto">
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
<div id="countdown">Video ends after <span>XX</span> seconds.</div>

我知道必须等待视频加载，然后如果加载了视频，则需要知道播放视频的时长和倒计时。

Answer 1

监听视频对象触发的 timeupdate 事件并更新剩余时间。

像这样的东西应该可以工作:

var video = document.getElementById('video');
video.addEventListener('timeupdate', updateCountdown);

function updateCountdown() {
    var timeSpan = document.querySelector('#countdown span');
    timeSpan.innerText = video.duration - video.currentTime;
}