HTML5 video with seamless loop within video

Question

I am programming an interactive video (kind of game) where the user make actions on a side panel and actions happens in the video.

For a part, the video is waiting for user action on the panel, so it has to loop until the action has been launch by the user.

So at 15 seconds, I get back to 11 seconds as long as the user has not made the action, video is designed to be a perfect loop.

My loop is working, but the problem is thats it's not seamless. At 15 seconds, it stops for like a second, and then starts back at 11 seconds. Is there a way to make it work seamless?

I am using VideoJS. Here is my code:

var video_decor = _V_("video_decor");
video_decor.addEvent("timeupdate", function(){
    var whereYouAt = video_decor.currentTime();
    console.log(whereYouAt);
    if(whereYouAt > 15){
        video_decor.currentTime(11);
    }
});

Answer 1

The easiest way to do a seamless loop is by using a full length video and waiting for the 'ended' event to go back to the beginning. That tends to be pretty smooth, so if you can make that happen some how that'd be best.

Taking a sub-section of the video and looping it is difficult, because browsers don't trigger the 'timeupdate' event every millisecond, and it would be really inefficient to do so. They instead trigger timeupdate every 15 (Chrome/Safari) or 250 (Firefox) milliseconds, so that's your margin of error. You could potentially create your own timer (setInterval) for a smaller interval and check the time manually, but that could put a heavy load on the browser.