Checking if a html5 video is ready

Question

is there an JavaScript event triggered, if a HTML5 video is ready for playback?

Answer 1

I assume that ready for playback means that the readyState property is equal to HAVE_ENOUGH_DATA constant (numeric value 4). According to the doc, when the readyState property turn to this value, a canplay event should be fired.

Answer 2

Good discussion here...

http://tiffanybbrown.com/2010/07/05/the-html5-video-progress-event/

Especially the first comment.

Basically, this was in the spec and was removed because it didn't exactly go hand in hand with the way media is rendered. Instead, .buffered was added.

Here is an example of buffered in use:

http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/

Answer 3

You have 2 events to handle when a video is ready to play.

• canplay: fired when video ready to play but buffering not complete
• canplaythrough : fired when video ready to play and buffering complete

Answer 4

Just came across this question and although it is a little old I am posting this for future readers (who; like me, probably come from Google).

So as of today this is the event list for html5 media (according to W3C):

• onabort : Script to be run on abort
  
• oncanplay : Script to be run when a file is ready to start playing (when it has buffered enough to begin)
  
• oncanplaythrough : Script to be run when a file can be played all the way to the end without pausing for buffering
  
• ondurationchange : Script to be run when the length of the media changes
  
• onemptied : Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
  
• onended : Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")
  
• onerror : Script to be run when an error occurs when the file is being loaded
  
• onloadeddata : Script to be run when media data is loaded
  
• onloadedmetadata : Script to be run when meta data (like dimensions and duration) are loaded
  
• onloadstart : Script to be run just as the file begins to load before anything is actually loaded
  
• onpause : Script to be run when the media is paused either by the user or programmatically
  
• onplay : Script to be run when the media is ready to start playing
  
• onplaying : Script to be run when the media actually has started playing
  
• onprogress : Script to be run when the browser is in the process of getting the media data
  
• onratechange : Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)
  
• onreadystatechange : Script to be run each time the ready state changes (the ready state tracks the state of the media data)
• onseeked : Script to be run when the seeking attribute is set to false indicating that seeking has ended
  
• onseeking : Script to be run when the seeking attribute is set to true indicating that seeking is active
  
• onstalled : Script to be run when the browser is unable to fetch the media data for whatever reason
  
• onsuspend : Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
  
• ontimeupdate : Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
  
• onvolumechange : Script to be run each time the volume is changed which (includes setting the volume to "mute")
  
• onwaiting : Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data).

Dantz was looking for oncanplaythrough.

Hope this helps.

Answer 5

I have found http://www.w3.org/TR/html5/video.html#mediaevents to be extremely useful as it lists all the events that are available when it comes to html5 media tags.