{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"Getting started with afterglow","type":"basic","slug":"getting-started","excerpt":"This page will help you get started with afterglow. It's just a quick overview, but for those who want to take the quickest road, this is the one to take.","body":"Setting up afterglow is as easy as it could be. Here is an example of a fully working video player with just a few lines of code.\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]\nThat's all there is to do. Just include afterglow in the `<head>` (or at the bottom of the page, just before `</body>`) to your page and it will work like magic. You can read more about this basic setup [here](doc:basic-player-setup).\n\nThere are four attributes you must pass to the `<video>` element in order to make afterglow work. You must pass the *class* 'afterglow', some *id* and of course *width* and *height* of the element. [Read more](doc:player-parameters).\n\nIf you wanted the player to behave in a special way, you might want to take a look at the [player parameters](doc:player-parameters). afterglow can be fully responsive, autoplay your video and so on.\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Self-hosting afterglow\"\n}\n[/block]\nAs you might have noticed, the example above uses afterglow via [jsDelivr](https://jsdelivr.com), a popular CDN hosting open source projects. You can self-host afterglow if you want to be independent of a CDN.\n\nRead more about this in the [self-hosting guide](doc:self-hosting-afterglow). afterglow is also available via bower or npm.\n\nto get the latest release.\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Replacing SublimeVideo\"\n}\n[/block]\nafterglow was initially created because SublimeVideo has been discontinued. It can be used as a drop-in replacement for SublimeVideo. \n\nUsing afterglow for this is actually quite easy. [Read more](doc:replacing-sublimevideo).","updates":["56a27156d00f7d0d00c8f05f","5e96881289faa70039991c78"],"order":0,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"59fb30931a8c8d002837cec6","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Documentation","slug":"documentation","order":0,"from_sync":false,"reference":false,"_id":"59fb30931a8c8d002837cec1","version":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","createdAt":"2015-09-02T11:25:40.976Z","__v":0},"user":"55e6dc8a2d0d3021000daf6e","project":"55e6dcb32d0d3021000daf70","parentDoc":null,"version":{"version":"1.1","version_clean":"1.1.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["59fb30931a8c8d002837cec1","59fb30931a8c8d002837cec2","59fb30931a8c8d002837cec3","59fb30931a8c8d002837cec4","59fb30931a8c8d002837cec5","59fb3502e786cb001c45ec9d"],"_id":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","createdAt":"2017-11-02T14:49:55.750Z","releaseDate":"2017-11-02T14:49:55.750Z","__v":2},"createdAt":"2015-09-02T11:25:41.775Z","githubsync":"","__v":1}
Getting started with afterglow
This page will help you get started with afterglow. It's just a quick overview, but for those who want to take the quickest road, this is the one to take.