kaltura-player-js

Player Events

The player event system uses an event target-like API to register, unregister and dispatch events. The event’s main purpose is to notify the player components about changes to the player state, ads, video progress, etc.

Table of Contents

Player Event Types

1. Core Events

Player core events consist of two event types:

Accessing Core Event Enums

A core event enum can be access in the following way:

player.Event.Core.EVENT_NAME;

Core Events List

The full core events list can be found here.

2. UI Events

Player UI events are events which triggers due to user interaction with the player UI.

Accessing UI Event Enums

A UI event enum can be access in the following way:

player.Event.UI.EVENT_NAME;

UI Events List

The full UI events list can be found here.

Registering to Player Events

You can listen to player events by adding an event listener to the player object, for example:

player.addEventListener(player.Event.Core.TRACKS_CHANGED, event => {
  const payload = event.payload;
  // Do something with the payload
});

Dispatching Events From the Player

To dispatch an event from the player instance, type the following code:

Dispatch Your Own Custom Event

player.dispatchEvent(
  new FakeEvent('myCustomEventName', {
    myCustomPayloadProp1: 'Hello',
    myCustomPayloadProp2: 'World'
  })
);

Dispatch An Existing Player Event

player.dispatchEvent(new FakeEvent(player.Event.Core.SEEKED));

Player Readiness

The player ready promise indicates the that player has done loading the media and can start playing. The promise is resolved when the TRACKS_CHANGED event is dispatched. A basic usage of this feature looks like this:

player.ready().then(() => {
  var tracks = player.getTracks();
});