{"_id":"59bbd88c63d94300101c668a","project":"55e6dcb32d0d3021000daf70","version":{"_id":"59bba3e115d1e10024261652","project":"55e6dcb32d0d3021000daf70","__v":1,"createdAt":"2017-09-15T09:56:49.752Z","releaseDate":"2017-09-15T09:56:49.752Z","categories":["59bba3e115d1e10024261653","59bba3e115d1e10024261654","59bba3e115d1e10024261655","59bba3e115d1e10024261656","59bba3e115d1e10024261657"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"59bba3e115d1e10024261655","version":"59bba3e115d1e10024261652","project":"55e6dcb32d0d3021000daf70","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-04T12:02:28.639Z","from_sync":false,"order":3,"slug":"examples","title":"Examples"},"user":"55e6dc8a2d0d3021000daf6e","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-09-15T13:41:32.736Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":8,"body":"Let's first create a basic player like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n  <head>\\n    <title>afterglow player</title>\\n    <script src=\\\"//cdn.jsdelivr.net/npm/afterglowplayer:::at:::1.x\\\"></script>\\n  </head>\\n  <body>\\n    <video class=\\\"afterglow\\\" id=\\\"myvideo\\\" width=\\\"1280\\\" height=\\\"720\\\">\\n    \\t<source type=\\\"video/mp4\\\" src=\\\"/path/to/myvideo.mp4\\\" />\\n    </video>\\n  </body>\\n<html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThis is what the player looks like:\n[block:html]\n{\n  \"html\": \"<video class=\\\"afterglow\\\" id=\\\"myvideo\\\" width=\\\"1280\\\" height=\\\"720\\\">\\n  <source src=\\\"http://afterglowplayer.com/sandbox/v1/afterglow_local_hd.mp4\\\" type=\\\"video/mp4\\\" />\\n</video>\"\n}\n[/block]\nWe observed the 'ready' event by using [Events](doc:events) to display the alert you just saw. Here is how:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"afterglow.on('myvideo', 'ready', function(){\\n\\talert('Yeah, afterglow is ready to go. This alert was brought to you by the \\\"ready\\\" event').\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<div class=\\\"enable-play-event\\\"></div>\"\n}\n[/block]\nHere is the latest event that was triggered (watch it update when you interact):\n[block:html]\n{\n  \"html\": \"<pre><code class=\\\"event-console\\\"></code></pre>\"\n}\n[/block]\nRead more about all available events here:  [Event documentation](doc:events).","excerpt":"You'll find some event interaction here.","slug":"using-events","type":"basic","title":"Using Events"}

Using Events

You'll find some event interaction here.

Let's first create a basic player like this: [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html>\n <head>\n <title>afterglow player</title>\n <script src=\"//cdn.jsdelivr.net/npm/afterglowplayer@1.x\"></script>\n </head>\n <body>\n <video class=\"afterglow\" id=\"myvideo\" width=\"1280\" height=\"720\">\n \t<source type=\"video/mp4\" src=\"/path/to/myvideo.mp4\" />\n </video>\n </body>\n<html>", "language": "html" } ] } [/block] This is what the player looks like: [block:html] { "html": "<video class=\"afterglow\" id=\"myvideo\" width=\"1280\" height=\"720\">\n <source src=\"http://afterglowplayer.com/sandbox/v1/afterglow_local_hd.mp4\" type=\"video/mp4\" />\n</video>" } [/block] We observed the 'ready' event by using [Events](doc:events) to display the alert you just saw. Here is how: [block:code] { "codes": [ { "code": "afterglow.on('myvideo', 'ready', function(){\n\talert('Yeah, afterglow is ready to go. This alert was brought to you by the \"ready\" event').\n});", "language": "javascript" } ] } [/block] [block:html] { "html": "<div class=\"enable-play-event\"></div>" } [/block] Here is the latest event that was triggered (watch it update when you interact): [block:html] { "html": "<pre><code class=\"event-console\"></code></pre>" } [/block] Read more about all available events here: [Event documentation](doc:events).