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.

  • JavaScript countdown adding start and reset buttons
  • This JS/jQuery code works in Firefox, but not in Chrome
  • Javascript reset countdown
  • JavaScript / jQuery Countdown
  • Count down from 10 and repeat it when the timer has reacted 0
  • Countdown timer using Moment js
  • How can I make a 10 second countdown timer before a download button link appears?
  • Strange problem with JavaScript code
  • timer is not reset when “game” restarts
  • Countdown timer in React
  • Javascript reset countdown
  • Show Redirecting In.. CountDown Timer PHP
  • 2 Solutions collect form web for “Countdown to the end of the HTML5 video”

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

    This should do the trick for you

    countdown = video.duration - video.currentTime
    

    See here for more details