CODEWITHSUNDEEP
javascriptcanvashtml5-video
rob
rob

Reputation: 10119

How to know when a video has advanced to the time I set it to be?

I am trying to capture frames from a html5 video, to a canvas. I have a long list of times that I need to capture. I set the video to paused, set videoElem.currentTime to a value, then write it to a canvas with canvasElem.drawImage().

This works fine if I use setTimeout in between setting the value, and writing it to the canvas -- and set the timeout period high enough. If I don't set the timeout period big enough, I will get a snapshot at the previous (i.e. wrong) position.

But I'm just guessing here, which means I might get it wrong, or I might be progressing through the list way slower than I have to.

I've tried monitoring various event handlers on the video, as well as using setTimeout with a vary small interval, and checking various things each time to try to tell if the video is where it is supposed to be. But no luck.

Specifically, I have not had luck with checking the value of currentTime (it stays at the value I set it to, even if the video hasn't yet gotten there), nor with checking the buffered array (it will say it has that part of the video, even though it still hasn't displayed yet), nor tapping into various events on the video (timeupdate, canplay, etc)

Is there some approach I'm missing?

Upvotes: 0

Views: 54

Answers (1)

pierdevara
pierdevara

Reputation: 406

Have you tried checking the state of the seeking property once the timeout finishes? If it's false draw to canvas and set new currentTime, otherwise restart timeout.

Source: http://www.w3.org/2010/05/video/mediaevents.html

Upvotes: 1

Related Questions