Html mp4 video Start and End time loop?-CodePudding

I have this codes

<video playsinline="" autoplay="true" loop="true" muted="true" id="robotVid">
    <source src="video1.mp4#t=25,30" type="video/mp4" autoplay="" loop="" muted="">                    
</video>

I can't loop it at the time intervals I set. Can anyone help? thanks.

I tried the javascript codes but couldn't. It is enough for it to loop at the time intervals I set.

CodePudding user response：

You can loop the video by using "controls loop" in the video tag:

<video width="320" height="240" controls loop>

To loop between second 25 and 30, I'd just cut the video (shortcut is a great option if you don't have any other video editing programs).

I hope this was helpful :)

CodePudding user response：

As you've discovered, the loop attribute will sadly loop back to the start of the video rather than just loop the specified range.

To loop a segment you can add an event listener for timeupdate event and monitor the currentTime attribute and reset it as needed.

You can still use the #t=25 to start where you wanted.

To ensure the initial seek is quick, you'll want to make sure the video is optimized with the MOOV atom (metadata) at the start of the file (so the browser doesn't have to read the whole file to know where the time point is in the video) and that your server supports byte range requests (so it can just straight to the part of the video file it needs)

The loop won't be as smooth as actually cropping the video to exactly the points you need and just playing it, but this method adds some flexibility.

You could get more creative and explore some of the more advanced features like Media Source Extensions to grab just the parts you need into a blob and feed it to the video element, but that's probably overkill!

<video id="robotVid" autoplay muted>
    <source src="https://media.w3.org/2010/05/sintel/trailer.mp4#t=25"  type="video/mp4">
</video>

<script>
    document.getElementById("robotVid").addEventListener("timeupdate",function() {
        v = document.getElementById("robotVid");
        if (v.currentTime > 30) {
            v.currentTime = 25;
        }
    })
</script>