{"_id":"59fb30931a8c8d002837cecd","category":{"_id":"59fb30931a8c8d002837cec2","version":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-04T12:01:11.730Z","from_sync":false,"order":1,"slug":"basics","title":"Basics"},"project":"55e6dcb32d0d3021000daf70","user":"55e6dc8a2d0d3021000daf6e","parentDoc":null,"version":{"_id":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","__v":2,"createdAt":"2017-11-02T14:49:55.750Z","releaseDate":"2017-11-02T14:49:55.750Z","categories":["59fb30931a8c8d002837cec1","59fb30931a8c8d002837cec2","59fb30931a8c8d002837cec3","59fb30931a8c8d002837cec4","59fb30931a8c8d002837cec5","59fb3502e786cb001c45ec9d"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-09-15T10:07:46.457Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":7,"body":"In order for you to be able to react to events that happen when users interact with afterglow, we implemented an event system.\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"Binding an event\"\n}\n[/block]\nEvents are bound per player and per event. In order to bind an event, use the `afterglow.on()` method\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"afterglow.on('myvideo','eventname', function(){ \\n  doSomething();\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYou can also unsubscribe from events like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"afterglow.off('myvideo','eventname', function(){ \\n\\tdoSomething();\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nBe 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.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Available events\"\n}\n[/block]\nHere comes a list of events that you can subscribe to.\n\n> ready\n\nThe 'ready' event will fire once when the player is ready. For lightbox players, this is after the lightbox has launched.\n\n> play\n\nThe 'play' event will fire every time the playback starts (also after pausing).\n\n> paused\n\nThe 'paused' event fires when playback is paused.\n\n> ended\n\nThe '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.\n\n> volume-changed\n\nThe 'volume-changed' event will fire whenever the volume changes. For some cases, this might happen when the playback starts (for Youtube videos, for example).\n\n> lightbox-launched\n\nThe 'lightbox-launched' event will fire whenever the lightbox is launched.\n\n> before-lightbox-close\n\nThe 'before-lightbox-closed' event will fire whenever the lightbox is about to be closed. The player **should** still exist while the event is triggered.\n\n> lightbox-closed\n\nThe '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.\n\n> fullscreen-entered\n\nThe 'fullscreen-entered' event will fire when the user enters fullscreen mode.\n\n> fullscreen-left\n\nThe 'fullscreen-left' event will fire when the user leaves fullscreen mode.\n\n> fullscreen-changed\n\nThe 'fullscreen-changed' event will fire when the user enters or leaves fullscreen mode.\n[block:api-header]\n{\n  \"title\": \"Using callback parameters\"\n}\n[/block]\nWhenever your registered callback function gets called, afterglow will pass some data to it for you to interact with. Here's an overview:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"afterglow.on('myvideo', 'someevent', function(event){\\n  event.type; // Will hold the triggered event type, in this case 'someevent'\\n  event.playerid; // Will hold the id of the video\\n  event.player; // Will hold a raw instance of the player, as returned by afterglow.getPlayer(...);\\n);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"This page tells you how to react to events which are emitted by afterglow.","slug":"events","type":"basic","title":"Events"}

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. [block:api-header] { "type": "fn", "title": "Binding an event" } [/block] Events are bound per player and per event. In order to bind an event, use the `afterglow.on()` method [block:code] { "codes": [ { "code": "afterglow.on('myvideo','eventname', function(){ \n doSomething();\n});", "language": "javascript" } ] } [/block] You can also unsubscribe from events like this: [block:code] { "codes": [ { "code": "afterglow.off('myvideo','eventname', function(){ \n\tdoSomething();\n});", "language": "javascript" } ] } [/block] 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. [block:api-header] { "type": "basic", "title": "Available events" } [/block] 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. [block:api-header] { "title": "Using callback parameters" } [/block] Whenever your registered callback function gets called, afterglow will pass some data to it for you to interact with. Here's an overview: [block:code] { "codes": [ { "code": "afterglow.on('myvideo', 'someevent', function(event){\n event.type; // Will hold the triggered event type, in this case 'someevent'\n event.playerid; // Will hold the id of the video\n event.player; // Will hold a raw instance of the player, as returned by afterglow.getPlayer(...);\n);", "language": "javascript" } ] } [/block]