CODEWITHSUNDEEP
javascripthtmlvideo
Cmasterd
Cmasterd

Reputation: 189

I want to turn currenttime and duration into a percentage

Hey so I want to monitor the progress of a video playing by percentage so when a user watching 25, 50 and 75% in sends an alert. This is what I have so far. 

var Currenttime1 = document.getElementById('video').attr('currenttime');
var Duration1 = document.getElementById('video').attr('duration');
console.log(Currenttime1);
console.log(Duration1);


function percenttime(){


                var timemonitored = Duration1/Currenttime1 *100;

                var alertsSent = 0;
                if(timemonitored > 25 && alertsSent == 0)
                {
                console.log(timemonitored);
                    alert("player has reached 25%");
                    alertsSent++;
                }
                else if(timemonitored > 50 && alertsSent == 1)
                {
                    alert("player has reached 50%");
                    alertsSent++;
                }
                else if(timemonitored > 75 && alertsSent == 2)
                {
                    alert("player has reached 75%");
                    alertsSent++;

                }
            }

Is there something I'm missing? I put in console.log to see what is in Duration1, Currenttime1 and timemonitored but it's not populating with the values. Here is the fiddle link. http://jsfiddle.net/Ypczm/

Upvotes: 1

Views: 3620

Answers (2)

Alex
Alex

Reputation: 10216

  1. check your syntax, your variables sometimes are capital and sometimes not
  2. use only jquery functions like .attr() when you have loaded jquery...
  3. you are defining the function but never call it. when do you expect this function to run?

one way could be to create an interval function which fires every 1000ms and get the current playtime with jquery.

Edit: working JS with jQuery:

$(function() {
    var vid = $('#video'),
        check,
        reached25 = false,
        reached50 = false,
        reached75 = false;

    vid.bind("play", function(event) {
        var duration = vid.get(0).duration;

        check = setInterval(function() {
                var current = vid.get(0).currentTime,
                    perc = (current / duration * 100).toFixed(2);


                if (Math.floor(perc) >= 25 &&! reached25) {
                    console.log("25% reached");
                    reached25 = true;
                }
                console.log(perc);
        }, 1000);
    });

    vid.bind("ended pause", function(event) {
        clearInterval(check);
    });

});

JSFiddle

Upvotes: 4

Marc B
Marc B

Reputation: 360702

You have multiple syntax errors:

console.log(Currenttime1)
                         ^--missing semi-colons (and on other lines as well)

console.log(duration1)
            ^---not capitalized

If you'd bothered looking at your browser's Javascript console (e.g. shift-ctrl-J in firefox), you'd have seen the JS syntax errors, which have completely KILLED the entire code block.

...

and now I see you stealth edited away the D v.s. d error, but no matter... the semicolon business still stands.

Upvotes: -1

Related Questions