CODEWITHSUNDEEP
javascripthtmlvideohtml5-videoreadystate
fsulser
fsulser

Reputation: 904

html5 video wait for readystate == 4 after setting currentTime

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

Upvotes: 6

Views: 14565

Answers (3)

Feng Liu
Feng Liu

Reputation: 1012

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

Upvotes: 0

fsulser
fsulser

Reputation: 904

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.

Upvotes: 7

Luke
Luke

Reputation: 949

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

Upvotes: 3

Related Questions