Make duration indicator of a HTML5 video counting up instead of down

user_11256647 0
Viewed 57

A timer underneath my HTML5 video is currently counting down.

01:00 00:59 00:58 00:57 and so on...

The jQuery rendering the timer:

// TIMER
    tv.addEventListener('timeupdate', function() {
        var duration = document.getElementById('tv_time');
        var time = tv.duration - tv.currentTime;
        var minutes = Math.floor(time / 60);
        var seconds = Math.floor(time % 60);
        if (!isNaN(seconds) && !isNaN(minutes)) {
            duration.innerHTML = minutes + ':' + pad(seconds, 2);
        }
    }, false);

Instead of counting down, I wish the timer could be counting up.

00:01 00:02 00:03 00:04 and so on...

Question:

How could I best adjust the jQuery code, to have the counter count up instead of down?

What I have tried:

I tried fiddling with the multiplication and division:

var minutes = Math.floor(time / 60);
var seconds = Math.floor(time % 60);

var minutes = Math.floor(time % 60);
var seconds = Math.floor(time / 60);

I tried to swap subtract for add:

var time = tv.duration - tv.currentTime;

var time = tv.duration + tv.currentTime;

I tried to say 'true' instead of 'false':

}, false);

}, true);

However, these examples just indicate that indeed I don't really know what I am doing here. I believe it's time for me to ask for guidance...

html5-video jquery
1 Answers

Just change:

var time =  tv.currentTime - tv.duration;

To

     var time =  tv.currentTime;

Then it shows the current position => counting up

  tv.addEventListener('timeupdate', function() {
        var duration = document.getElementById('tv_time');
        var time =  tv.currentTime;
        var minutes = Math.floor(time / 60);
        var seconds = Math.floor(time % 60);
        if (!isNaN(seconds) && !isNaN(minutes)) {
            duration.innerHTML = minutes + ':' + pad(seconds, 2);
        }
    }, false);
user_29761750
Related