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.

<!DOCTYPE html>
<html>
  <head>
    <title>afterglow player</title>
    <script src="//cdn.jsdelivr.net/npm/afterglowplayer@1.x"></script>
  </head>
  <body>
    <video class="afterglow" id="myvideo" width="1280" height="720">
        <source type="video/mp4" src="/path/to/myvideo.mp4" />
    </video>
  </body>
</html>

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.

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.

If you wanted the player to behave in a special way, you might want to take a look at the player parameters. afterglow can be fully responsive, autoplay your video and so on.

Self-hosting afterglow

As you might have noticed, the example above uses afterglow via jsDelivr, 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. afterglow is also available via bower or npm.

to get the latest release.

Replacing SublimeVideo

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.