CODEWITHSUNDEEP
javascripthtmlhtml5-videopopcornjs
Eric Richard Austin
Eric Richard Austin

Reputation: 157

HTML5 video within time frame

So I am working on an interactive HTML5 video player, and currently have everything working while using popcorn.js, but I am now trying to go back and make my player work without being dependent on popcorn.js.

When working with popcorn.js, you can use code like:

popcorn.code((
    start: 0,
    end: 5,
    onStart: function( options ) {
        //put code here
    }
}}

and your code will be executed when the time of your video spans from 0 through 5. Now, I am trying to have certain blocks of code executed within a certain timeframe of the video, but i can't seem to get it working right and was just wondering if someone can see where i am going about this wrong.

while (myVideo.currentTime >= 0 && myVideo.currentTime <= 5)
{
    console.log(myVideo.currentTime);
}

This while loop is also running so fast that it causes the browser to slow down and freeze. However, if i try using an if loop instead of a while loop, it (obviously) only checks it once.

Upvotes: 0

Views: 801

Answers (2)

spooky
spooky

Reputation: 1648

Try using the following so your function will run only once every second.

setInterval(function(){
if(myVideo.currentTime >= 0 && myVideo.currentTime <= 5){
console.log(myVideo.currentTime);
}
},1000);

Good luck!

Upvotes: 1

insertusernamehere
insertusernamehere

Reputation: 23580

You could check fewer than the while loop would.

var check = setInterval(function() {
    if (myVideo.currentTime >= 5) {
        clearInterval(check);
        console.log("5 seconds reached");
    }
}, 500);

You than can start this again when the user pauses and starts over or if he jumps to another time within the timeline.

Upvotes: 1

Related Questions