{"_id":"59fb30941a8c8d002837cedd","category":{"_id":"59fb30931a8c8d002837cec4","version":"59fb30931a8c8d002837cec0","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","project":"55e6dcb32d0d3021000daf70","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":"2015-09-08T12:54:50.268Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":23,"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\\\" data-autoresize=\\\"fit\\\">\\n  <source src=\\\"http://afterglowplayer.com/sandbox/v1/afterglow_local_hd.mp4\\\" type=\\\"video/mp4\\\" />\\n</video>\"\n}\n[/block]\nNow lets manipulate it by using some [API functions](doc:api).\n[block:html]\n{\n  \"html\": \"<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"play\\\">afterglow.getPlayer('myvideo').play();</a>\\n<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"pause\\\">afterglow.getPlayer('myvideo').pause();</a>\\n<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"time-11\\\">afterglow.getPlayer('myvideo').currentTime(11);</a>\\n<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"enterfullscreen\\\">afterglow.getPlayer('myvideo').requestFullscreen();</a>\\n<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"exitfullscreen\\\">afterglow.getPlayer('myvideo').exitFullscreen();</a>\\n<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"volume-5\\\">afterglow.getPlayer('myvideo').volume(.5);</a>\\n<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"volume-0\\\">afterglow.getPlayer('myvideo').volume(0);</a>\\n  \\n<style>a.apiexample{cursor:pointer;margin-bottom:4px;}</style>\"\n}\n[/block]\nAnd lets use some diagnostic functions.\n[block:html]\n{\n  \"html\": \"<div class=\\\"well\\\">Method output: <span class=\\\"methodoutput\\\"></div>\\n\\n<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"paused\\\">afterglow.getPlayer('myvideo').paused();</a>\\n  <a class=\\\"apiexample btn btn-default\\\" data-action=\\\"duration\\\">afterglow.getPlayer('myvideo').duration();</a>\\n<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"currentTime\\\">afterglow.getPlayer('myvideo').currentTime();</a>\\n  <a class=\\\"apiexample btn btn-default\\\" data-action=\\\"remainingTime\\\">afterglow.getPlayer('myvideo').remainingTime();</a>\\n<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"isFullscreen\\\">afterglow.getPlayer('myvideo').isFullscreen();</a>\\n<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"volume\\\">afterglow.getPlayer('myvideo').volume();</a>\\n<a class=\\\"apiexample btn btn-default\\\" data-action=\\\"ended\\\">afterglow.getPlayer('myvideo').ended();</a>\\n  \\n<style>a.apiexample{cursor:pointer;margin-bottom:4px;}</style>\"\n}\n[/block]","excerpt":"You'll find some of afterglow's API functions in action here.","slug":"using-the-api","type":"basic","title":"Using the API"}

Using the API

You'll find some of afterglow's API functions in action 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\" data-autoresize=\"fit\">\n <source src=\"http://afterglowplayer.com/sandbox/v1/afterglow_local_hd.mp4\" type=\"video/mp4\" />\n</video>" } [/block] Now lets manipulate it by using some [API functions](doc:api). [block:html] { "html": "<a class=\"apiexample btn btn-default\" data-action=\"play\">afterglow.getPlayer('myvideo').play();</a>\n<a class=\"apiexample btn btn-default\" data-action=\"pause\">afterglow.getPlayer('myvideo').pause();</a>\n<a class=\"apiexample btn btn-default\" data-action=\"time-11\">afterglow.getPlayer('myvideo').currentTime(11);</a>\n<a class=\"apiexample btn btn-default\" data-action=\"enterfullscreen\">afterglow.getPlayer('myvideo').requestFullscreen();</a>\n<a class=\"apiexample btn btn-default\" data-action=\"exitfullscreen\">afterglow.getPlayer('myvideo').exitFullscreen();</a>\n<a class=\"apiexample btn btn-default\" data-action=\"volume-5\">afterglow.getPlayer('myvideo').volume(.5);</a>\n<a class=\"apiexample btn btn-default\" data-action=\"volume-0\">afterglow.getPlayer('myvideo').volume(0);</a>\n \n<style>a.apiexample{cursor:pointer;margin-bottom:4px;}</style>" } [/block] And lets use some diagnostic functions. [block:html] { "html": "<div class=\"well\">Method output: <span class=\"methodoutput\"></div>\n\n<a class=\"apiexample btn btn-default\" data-action=\"paused\">afterglow.getPlayer('myvideo').paused();</a>\n <a class=\"apiexample btn btn-default\" data-action=\"duration\">afterglow.getPlayer('myvideo').duration();</a>\n<a class=\"apiexample btn btn-default\" data-action=\"currentTime\">afterglow.getPlayer('myvideo').currentTime();</a>\n <a class=\"apiexample btn btn-default\" data-action=\"remainingTime\">afterglow.getPlayer('myvideo').remainingTime();</a>\n<a class=\"apiexample btn btn-default\" data-action=\"isFullscreen\">afterglow.getPlayer('myvideo').isFullscreen();</a>\n<a class=\"apiexample btn btn-default\" data-action=\"volume\">afterglow.getPlayer('myvideo').volume();</a>\n<a class=\"apiexample btn btn-default\" data-action=\"ended\">afterglow.getPlayer('myvideo').ended();</a>\n \n<style>a.apiexample{cursor:pointer;margin-bottom:4px;}</style>" } [/block]