Events

The player emits both standard HTML5 media events and custom PRESTOplay events during playback. This page covers how to listen for them.

HTML5 media events

The player forwards standard HTML5 media events, so you can listen to them with their regular names, such as play, playing, pause, seeking, seeked, timeupdate, volumechange, and ended.

See the MDN media events reference for the complete list.

PRESTOplay events

PRESTOplay events are exposed under the clpp.events namespace and often include a structured payload. Commonly used events:

• clpp.events.STATE_CHANGED

• clpp.events.AUTOPLAY_NOT_ALLOWED

• clpp.events.LOAD_START

• clpp.events.LOADEDMETADATA

• clpp.events.BUFFERING_STARTED and clpp.events.BUFFERING_ENDED

• clpp.events.TRACKS_ADDED

• clpp.events.AUDIO_TRACK_CHANGED, clpp.events.TEXT_TRACK_CHANGED, and clpp.events.VIDEO_TRACK_CHANGED

• clpp.events.BITRATE_CHANGED

• clpp.events.ERROR

• clpp.events.RELEASING

See events for the complete list.

Add an event listener

Attach listeners immediately after creating the player, so you don’t miss any events:

const player = new clpp.Player('video');
player.on('<eventname>', () => {});
player.open({ source: 'https://example.com/Manifest.mpd' });

HTML5 media event example:

player.on('timeupdate', () => {
  console.log('Position:', player.getPosition());
});

PRESTOplay player event example:

player.on(clpp.events.STATE_CHANGED, (event) => {
  const detail = event.detail;
  console.log('State changed:' +
    `${detail.previousState} -> ${detail.currentState}`);
});

Listen once

Add an event listener that gets triggered only once:

player.one('playing', () => {
  console.log('Playback started');
});

Remove an event listener

It’s important to remove event listeners when they’re no longer needed.

For an event listener registered like this:

function onVolumeChange(event) {}
player.on('volumechange', onVolumeChange);

Remove it when no longer needed:

player.off('volumechange', onVolumeChange);

Next topic: Errors

Previous topic: Audio player