Skip to main content

Events Listening

Adding Event Listeners​

Events listening can be done with the on method. The method takes two arguments: the eventName and callbackFn, it will be called every time the event is fired and receive an event object as its first argument which has additional information about the event that was fired.

player.on('play', () => {
  console.log('Player was played.');
});

player.on('pause', () => {
  console.log('Player was paused.');
});

player.on('ended', () => {
  console.log('Player playback finished.');
});

player.on('enterfullscreen', () => {
  console.log('Player entered fullscreen.');
});

Removing Event Listeners​

Event listeners can be removed with the off method. The method takes two arguments: the eventName and callbackFn, function that was used when the event listener was attached. The callback function must be the same function that was used when the event listener was attached.

tip

You probably don't need to remove event listeners in most cases, unless your website is built with a framework like React.js or Vue.js for example and you are rendering the player dynamically inside of a component. In that case, you must remove the event listeners when the component is unmounted.

warning

If you are using an anonymous function, you will not be able to remove the event listener. Clearing event listeners is not necessary when the player is destroyed, the player will automatically remove all event listeners when it is destroyed.

function handlePlay() {
  console.log('Player was played.');
}

player.on('play', handlePlay);
// ...
player.off('play', handlePlay);