This page tells you how to react to events which are emitted by afterglow.

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(){ 

You can also unsubscribe from events like this:'myvideo','eventname', function(){ 

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.


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


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


The 'paused' event fires when playback is paused.


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.


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).


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


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.


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.


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


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


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(...);