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

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

• javascript
• html
• video
• html5-video
• readystate

• See: stackoverflow./questions/13864795/… – Kevin van Hoorn Commented Feb 11, 2014 at 11:06
• 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? – fsulser Commented Feb 11, 2014 at 11:51

3 Answers 3

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.

Check out http://www.w3/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'); });

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/en-US/docs/Web/Guide/Events/Media_events