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 and provides some helpful information about using them.

Event name	Description
`abort`	Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.
`canplay`	Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the `HAVE_ENOUGH_DATA` `readyState`.
`canplaythrough`	Sent when the ready state changes to `CAN_PLAY_THROUGH`, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. Note: Manually setting the `currentTime` will eventually fire a `canplaythrough` event in firefox. Other browsers might not fire this event.
`durationchange`	The metadata has loaded or changed, indicating a change in duration of the media. This is sent, for example, when the media has loaded enough that the duration is known.
`emptied`	The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the `load()` method is called to reload it.
encrypted	The user agent has encountered initialization data in the media data.
`ended`	Sent when playback completes.
`error`	Sent when an error occurs. The element's `error` attribute contains more information. See Error handling for details.
`interruptbegin`	Sent when audio playing on a Firefox OS device is interrupted, either because the app playing the audio is sent to the background, or audio in a higher priority audio channel begins to play. See Using the AudioChannels API for more details.
`interruptend`	Sent when previously interrupted audio on a Firefox OS device commences playing again — when the interruption ends. This is when the associated app comes back to the foreground, or when the higher priority audio finished playing. See Using the AudioChannels API for more details.
`loadeddata`	The first frame of the media has finished loading.
`loadedmetadata`	The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.
`loadstart`	Sent when loading of the media begins.
`mozaudioavailable`	Sent when an audio buffer is provided to the audio layer for processing; the buffer contains raw audio samples that may or may not already have been played by the time you receive the event.
`pause`	Sent when playback is paused.
`play`	Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior `pause` event.
`playing`	Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).
`progress`	Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's `buffered` attribute.
`ratechange`	Sent when the playback speed changes.
`seeked`	Sent when a seek operation completes.
`seeking`	Sent when a seek operation begins.
`stalled`	Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
`suspend`	Sent when loading of the media is suspended; this may happen either because the download has completed or because it has been paused for any other reason.
`timeupdate`	The time indicated by the element's `currentTime` attribute has changed.
`volumechange`	Sent when the audio volume changes (both when the volume is set and when the `muted` attribute is changed).
`waiting`	Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

You can easily watch for these events, using code such as the following:

var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;

This example fetches the first video element in the document and attaches an event listener to it, watching for the seeked event, which is sent whenever a seek operation completes. The listener simply calls the element's play() method, which starts playback.

Then, in line 3, the example sets the element's currentTime attribute to 10.0, which initiates a seek operation to the 10-second mark in the media. This causes a seeking event to be sent when the operation begins, then a seeked event to be dispatched when the seek is completed.

In other words, this example seeks to the 10-second mark in the media, then begins playback as soon as that's finished.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	?	3.5 (1.9.1)	?	?	?
encrypted	42.0	?	?	?	?
load	?	Not supported [1]	?	?	?
mozaudioavailable	Not supported	4.0 (2.0)	Not supported	Not supported	Not supported
suspend	?	3.6 (1.9.2)	?	?	?

Feature	Android	Android Webview	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	?	?	?	?	?	?
encrypted	Not supported	43.0	?	?	?	?	42.0
load	?	?	?	?	?	?	?
mozaudioavailable	Not supported	?	4.0 (2.0)	Not supported	Not supported	Not supported	?
suspend	?	?	?	?	?	?	?

[1] Removed in Gecko 1.9.2.

Media events

Browser compatibility

Document Tags and Contributors