Countdown to the end of the HTML5 video

问题

Can I make a countdown to the end of the HTML5 video?

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

I understand that a have to wait for the video load, and then if the video is loaded, need to know the length and run video and coundown.

回答1:

Listen to the timeupdate event fired by the video object and update the time remaining.

Something like this should work:

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

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

回答2:

This should do the trick for you

countdown = video.duration - video.currentTime

See here for more details

来源：https://stackoverflow.com/questions/14491392/countdown-to-the-end-of-the-html5-video