Countdown to the end of the HTML5 video

Question

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.

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

Answer 2

This should do the trick for you

countdown = video.duration - video.currentTime

See here for more details