Loop A Html5 Video In Specific Timline With Js

i had a html5 video box with only one video inside. in this video their is a animated figure with different moves. as an example: second 1-5 the figure walks inside, second 5-7 the

Solution 1:

you will need to check for both the start/stop of the fragments you want to loop within in order to constrain the test.

In the example below it will loop from the 15s mark (or greater) back to 10s; from the 9s mark back to 7; from the 5s mark back to 1.

For a production version I'd probably create an array of the jump points and use that to avoid having to type the times as an upper/lower, but this should give you a framework to go on from:

<videopreload="auto"controlsid="vidplayer"><sourcesrc="BigBuck.m4v"type='video/mp4;'"></source></video><script>var vid = document.getElementById("vidplayer")

vid.addEventListener('timeupdate', timeupdate, false);

functiontimeupdate() {
    if (vid.currentTime >= 15) {
        vid.currentTime = 10;
    } elseif (vid.currentTime >= 9 && vid.currentTime < 10) {
        vid.currentTime = 7;
    } elseif (vid.currentTime >= 5 && vid.currentTime < 7) {
        vid.currentTime = 1;
    }
}

</script>

Solution 2:

I had the same problem and wrote a plugin to solve it. See https://github.com/phhu/videojs-abloop . This allows javascript commands to be used to control looping of section of video. The example shows how you might control switching different sections of video using callbacks or otherwise.