The Modern Web

Media Events

JavaScript events are fired during the course of loading, playing back, and interacting with media files, providing plenty of scope for attaching event handlers. Let’s begin with events for the multiple stages of the readyState property: State 1 is represented by loadedmetadata, state 2 by loadeddata, state 3 by canplay, and state 4 by canplaythrough.

For example, the following code logs a message into the console when a video file has reached state 4—that is, sufficient data is available for the media to play through until the end:

video.addEventListener('canplaythrough', function () {
  console.log('Can play through.');
}, false);

For the playback state, playing is fired when the media is first played and pause when playback is paused. ...