Events
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(){
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(...);
);
Updated less than a minute ago