Popcorn.js Documentation

Events

Events in Popcorn.js work on a trigger and listen system. You are able to trigger events to happen and all of that events listeners will be executed. This makes it easy in Popcorn.js to perform actions at given moments during a video, for example, perform an action whenever the video is paused would simply consist of listen for the pause event and providing a callback function to perform your actions.

abort

Purpose

Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.

Examples

Live demo of abort

canplay

Purpose

Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the CAN_PLAY readyState.

Examples

Live demo of canplay

canplayall

Purpose

"canplayall" is triggered by Popcorn the first time "canplaythrough" is fired for a media element. "canplayall" is to be used with the on and off instance methods.

For example:

  • popcornInstance.on( "canplayall", callbackFunction );
  • popcornInstance.off( "canplayall", callbackFunction );

Use Cases

"canplayall" is useful for determining the point at which a media element is ready to have its "currentTime" value changed.

Examples

Live demo using canplayall

canplaythrough

Purpose

Sent when the readyState 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.

Examples

Live demo of canplaythrough

durationchange

Purpose

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.

Examples

Live demo of durationchange

emptied

Purpose

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.

Examples

Live demo of emptied

ended

Purpose

Sent when playback completes.

Examples

Live demo of ended

error

Purpose

Sent when an error occurs. The element’s error attribute contains more information. See Error handling for details.

Examples

Live demo of error

loadeddata

Purpose

The media’s metadata has finished loading; all attributes now contain as much useful information as they’re going to.

Examples

Live demo of loadeddata

loadstart

Purpose

Sent when loading of the media begins.

Examples

Live demo of loadstart

pause

Purpose

Sent when playback is paused.

Examples

Live demo of pause

play

Purpose

Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior pause event.

Examples

Live demo of play

playing

Purpose

Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).

Examples

Live demo of playing

progress

Purpose

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.

Examples

Live demo of progress

ratechange

Purpose

Sent when the playback speed changes.

Examples

Live demo of ratechange

seeked

Purpose

Sent when a seek operation completes.

Examples

Live demo of seeked

seeking

Purpose

Sent when a seek operation begins.

Examples

Live demo of seeking

suspend

Purpose

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.

Examples

Live demo of suspend

timeupdate

Purpose

The time indicated by the element’s currentTime attribute has changed.

Examples

Live demo of timeupdate

trackend

Purpose

"trackend" is triggered by Popcorn when any instance of a plugin has its end method invoked. "trackend" is to be used with the on and off instance methods.

For example:

  • popcornInstance.on( "trackend", callbackFunction );
  • popcornInstance.off( "trackend", callbackFunction );

Use Cases

Trigger a visual cue ( such as a transition ) whenever a plugin has its end method called.

Examples

Live demo using trackend

trackstart

trackstart

Purpose

trackstart is triggered by Popcorn when any instance of a plugin has its start method invoked. To be used with the on and off methods.

For example:

  • popcornInstance.on( "trackstart", callbackFunction )
  • popcornInstance.off( "trackstart", callbackFunction )

Use Cases

Trigger a visual cue ( such as a transition ) whenever a plugin starts.

Examples

Live demo using trackstart

trackend

volumechange

Purpose

Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).

Examples

Live demo of volumechange

waiting

Purpose

Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

Examples

Live demo of waiting