html5 video wait for readystate == 4 after setting currentTime

html5 video readystate
html5 video events jquery
html5 video seek
video addeventlistener
html5 video when loaded
video canplay event
html5 video player demo
html5 video add event listener

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

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.

javascript, 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  If I examine currentTime, it is correct as to what I just set. But it doesn't actually go there. Also I can no longer interact with the video. It ignores any calls to play() or pause() after I try to set currentTime. Before I call currentTime, when I call play() I get this valid promise back, and everything else still works: After I call

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

HTML5 Unleashed, Setting the currentTime property of a media element right away allows us to so we set the currentTime attribute when the video's loadedmetadataeventfires. we need to wait for the media metadata (which tells us the media's duration) to load. The value from readyState will be an integer from 0 to 4, which corresponds  Last week I explored how you could get the duration of a HTML5 video. It's an important technique, obviously, but one that may be a bit more important is managing the video's time setting. Both setting and getting the video's time is important when creating a chrome around the video,

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

The Definitive Guide to HTML5 Video, The following IDL attributes, all related to playback position and control, are currentTime before the readyState is at least HAVE_METADATA. (if any) will be stopped and you will have to wait until that data is available. Listing 4–10. Getting and setting the currentTime value for a media element <video controls autoplay  TL;DR: change currentTime on the loadeddata event. This works for audio too. It looks like Safari (and the problem is still appearing for me on Safari 11.1) is Safari will not allow currentTime to be changed when a video is first loaded IF it hasn't loaded a frame for that currentTime yet.

Media events, Various events are sent when handling media that are embedded in HTML documents using the audio and video elements; this section lists them This corresponds to the HAVE_FUTURE_DATA readyState . Note: Manually setting the currentTime will eventually fire a canplaythrough event in firefox. @heff i have trouble with ios. your code helps on ios7: it starts the video, plays from the start for a short while (for 1 sec or so) and then jumps to 10 sec but then pauses. on ios6 it seems to just ignore the call to currentTime(). i tried without videojs, just plain and observed the following:

Questions for tag readystate, Equivalent of readystatechange after changing page content using javascript · AJAX function html5 video wait for readystate == 4 after setting currentTime. Setting currentTime to a new value seeks the media to the given time, if the media is available. For media without a known duration—such as media being streamed live—it's possible that the browser may not be able to obtain parts of the media that have expired from the media buffer.

HTML5 Video, html5 video wait for readystate == 4 after setting currentTime - We have taken a longer video so that there is a possibility for the browsers not to load all Getting  Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example). Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.

Comments
  • See: stackoverflow.com/questions/13864795/…
  • 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?