Html5 Video Repeat At A Given Timeframe

I tried to create a repeat function associating with an HTML5 video element, so it allows the player to repeat at the given time frame that I want. I will call this function in the

Solution 1:

You will need to wrap the looping code in a named function so you can remove the old loop before setting up a new one. That is racked in funcLoop below

I have also added a check so that if you're in the old loop and trigger a new one then it moves to the start (not sure if you need that, but seemed to make it more complete)

<videoid="video"controls="controls"mutedpreload="metadata" ><sourcesrc="video.mp4"type="video/mp4" /></video><buttononclick="repeat(1,3)">1-3</button><buttononclick="repeat(5,7)">5-7</button><script>var funcLoop
functionrepeat(startTime, endTime) {
    var video = document.getElementById('video');
    video.removeEventListener('timeupdate', funcLoop, false);
    video.addEventListener('timeupdate', funcLoop=function(){
        if (video.currentTime < startTime) {
            video.currentTime = startTime;
        }
        if (video.currentTime >= endTime) {
            video.currentTime = startTime;
        }}, false);
    video.play();
}
</script>