Events

In order for you to be able to react to events that happen when users interact with afterglow, we implemented an event system.

Binding an event

Events are bound per player and per event. In order to bind an event, use the afterglow.on() method

afterglow.on('myvideo','eventname', function(){ 
  doSomething();
});

You can also unsubscribe from events like this:

afterglow.off('myvideo','eventname', function(){ 
	doSomething();
});

Be aware, that for every time you subscribe, you will also need to unsubscribe if you want to. So if you subscribed twice with the same callback, you will also have to unsubscribe twice with this callback, if you want the callback to not happen any more.

Available events

Here comes a list of events that you can subscribe to.

ready

The 'ready' event will fire once when the player is ready. For lightbox players, this is after the lightbox has launched.

play

The 'play' event will fire every time the playback starts (also after pausing).

paused

The 'paused' event fires when playback is paused.

ended

The 'ended' event will fire when playback was paused because the video has reached it's end. 'paused' will most probably fire just before this, too.

volume-changed

The 'volume-changed' event will fire whenever the volume changes. For some cases, this might happen when the playback starts (for Youtube videos, for example).

lightbox-launched

The 'lightbox-launched' event will fire whenever the lightbox is launched.

before-lightbox-close

The 'before-lightbox-closed' event will fire whenever the lightbox is about to be closed. The player should still exist while the event is triggered.

lightbox-closed

The 'lightbox-closed' event will fire whenever the lightbox is closed. This can also be the case after the video ended or when the user clicks the lightbox overlay.

fullscreen-entered

The 'fullscreen-entered' event will fire when the user enters fullscreen mode.

fullscreen-left

The 'fullscreen-left' event will fire when the user leaves fullscreen mode.

fullscreen-changed

The 'fullscreen-changed' event will fire when the user enters or leaves fullscreen mode.

Using callback parameters

Whenever your registered callback function gets called, afterglow will pass some data to it for you to interact with. Here's an overview:

afterglow.on('myvideo', 'someevent', function(event){
  event.type; // Will hold the triggered event type, in this case 'someevent'
  event.playerid; // Will hold the id of the video
  event.player; // Will hold a raw instance of the player, as returned by afterglow.getPlayer(...);
);