How can I get pixel data of every frame in a HTML5 <video> element

Question

I'm thinking I'll have to wait for the video to finish loading, then set up an interval (at 1/24 sec.) to get the current frame data, for the duration of the video. But that seems pretty hacky and looks like it might skip frames and such…

So, is there a "onFrameChange" listener I can hook on to, so I can get every frame, or any other way to get the image data of every frame of a HTML5 video?

Thanks in advance.

Answer 1

There is the timeUpdate event which is fired any time the time changes (through normal playback, or the user scrubbing the controls). On Firefox, this is fired once per frame, though that assumption isn't portable to other browsers.

I don't think that there's a portable way of doing what you mention. I've advocated for timeUpdate to be more reliable, but haven't made much headway. An interval at 1/24th of a second, or faster, may be the best way to do it.