CODEWITHSUNDEEP
javascripthtmlflashvideohtml5-video
Ecko
Ecko

Reputation: 1415

Stop video at exact time

I'm trying to make a little video editing web tool to make perfect video loops and need to stop a video at an exact time.

The recommended way to do that with HTML5 video is with the timeupdate events

video.addEventListener("timeupdate", function() {
    if (video.currentTime >= endtime)
        video.pause();
}, false);

However the problem is the granularity of those is only around 100 to 300ms from what I've seen in most browsers, which makes it impossible to stop at an exact time and get good video loops.

So when I try to stop at 1.35 seconds it might only stop at 1.51 or whenever the next event decides to show up.

Alternative ways to stop HTML5 videos are by adding #t=,endtime or checking .currentTime in intervals, however both are tied to the same exact granularity.

How do I stop at an exact time?

Doesn't have to be with HTML5 video tag, the tool is only for my personal use so hacky solutions or things that require Flash or other plugins are totally okay.

Upvotes: 1

Views: 1131

Answers (1)

zerohero
zerohero

Reputation: 583

I think it's only accurate up to 1 second, so stopping a video at a millisecond range like you want to is going to be difficult using timeupdate event, as you noticed, there is roughly a 250ms delay in stopping it.

What you could try is poll the currentTime with setInterval at a rate, e.g. every 50ms and pause the video when it gets past your stop time.

That would probably give you what you need (instead of relying on timeupdate event), but could add additional load on your browser.

Upvotes: 2

Related Questions