倒計時結束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>

我知道必須等待視頻加載，然后如果視頻加載，需要知道長度並運行視頻和coundown。

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

Answer 2

這應該為你做的伎倆

countdown = video.duration - video.currentTime

有關詳細信息，請參見此處