html5 video wait for readystate == 4 after setting currentTime

Question

I'm trying to grap some images of a video that is not played. Therefore I use the HTML5 .

Because I want to grab images that haven't been played, I set

video.currentTime = y;

If I now call the grap function it won't work. Because the video.readyState is 1 (and not 4). If I add at the beginning of the grab function an alert(); it works.

I tried to loop until readyState == 4 with

while(true){
   if(video.readyState == 4){
       grapImage();
   }
}

but this ends up in an endless loop.

So how can I wait until readyState == 4?

Thanks

Uni

See: #13865295 – Sigismund

My Problem is that, if I call video.load() I get the message "Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable." At the line where I call video.currentTime = y; with the method mentioned there as the second entry. Does load() destroyes the video element? Or why am I getting this Error? – Uni

Answer 1

Ok I solved it with the event listener seeked.

If you change the current time it changes to seeking once it's finished it goes to seeked. The loadedmetadata event is also an option, but seeked is the fastest one.

Thanks for your help.

Uni

Answer 2

Check out http://www.w3.org/2010/05/video/mediaevents.html for relevent events to listen for. Try listening to the 'loadedmetadata' event, rather than setting currentTime immediately after load(), as that indicates that all duration/timing information is loaded for a video ('canplay' also works).

video.addEventListener('loadedmetadata', function () { console.log('video duration information available'); });

Formenti

Answer 3

Use "canplay" for media. According to MDN web docs, media event "canplay" corresponds to the HAVE_ENOUGH_DATA readyState, which is readyState 4.

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

Rivarivage