Table of Contents for

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. If playback is restarted after a pause, the play event fires, and when the media reaches the end, ended fires. If playback is interrupted for some reason—for example, if the media is playing but the user restarts it manually from the beginning—the abort event is fired.

The volumechange event fires when the volume property value changes or the muted attribute is toggled, seeking when the seek bar is being used, and seeked when the seek operation ends. When the currentTime property updates, the timeupdate event fires.