{"_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"},"__v":0,"updates":["56a27156d00f7d0d00c8f05f"],"next":{"pages":[],"description":""},"createdAt":"2015-09-02T11:25:41.775Z","link_external":false,"link_url":"","githubsync":"","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"}

Documentation

Basics

Parameters

Examples

Advanced stuff

Recipes

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.
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. [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] That'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). There 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). If 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. [block:api-header] { "type": "basic", "title": "Self-hosting afterglow" } [/block] As 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. Read more about this in the [self-hosting guide](doc:self-hosting-afterglow). afterglow is also available via bower or npm. to get the latest release. [block:api-header] { "type": "basic", "title": "Replacing SublimeVideo" } [/block] afterglow was initially created because SublimeVideo has been discontinued. It can be used as a drop-in replacement for SublimeVideo. Using afterglow for this is actually quite easy. [Read more](doc:replacing-sublimevideo).