{"_id":"59fb30931a8c8d002837cec6","category":{"_id":"59fb30931a8c8d002837cec1","version":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-02T11:25:40.976Z","from_sync":false,"order":0,"slug":"documentation","title":"Documentation"},"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"},"githubsync":"","__v":0,"metadata":{"title":"","description":"","image":[]},"updates":["56a27156d00f7d0d00c8f05f"],"next":{"pages":[],"description":""},"createdAt":"2015-09-02T11:25:41.775Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":0,"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).","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.","slug":"getting-started","type":"basic","title":"Getting started with afterglow"}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.