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

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.

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'); });

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