Basic player setup

Setting up afterglow is a pretty easy task. As afterglow is designed to do all the work, you won't have to do that much yourself.

Step 1 - include afterglow's Javascript file

This is the first thing you should do. You must include afterglow's Javascript file into your HTML markup. The <script> tag can be placed within the document's <head> element or somewhere in the <body> element (preferably at the bottom, just above the closing </body> tag.

Here is an example of script inclusion within the <head> element.

<!DOCTYPE html>
<html>
  <head>
    <!-- Lot's of meta stuff here -->
    <script src="//cdn.jsdelivr.net/npm/afterglowplayer@1.x"></script>
  </head>
  <body>
    <!-- Some content here -->
  </body>
</html>

That's it, afterglow will now start working with any <video> elements it finds in the markup.

In this example, we used the CDN hosted version of afterglow, which will automatically be updated to the latest version if there are new releases. You could also download and self-host afterglow. Read more about this in the self-hosting guide.

Step 2 - add video elements

As soon as the script is included into the markup, afterglow will start looking for video elements having the class 'afterglow'. These video elements will be initialized and converted into fully functional afterglow player instances.

So, all you've got to do now is to create <video> elements and include them into your markup.

Here's a quick code sample for a basic valid <video> element.

<video class="afterglow" id="myvideo" width="1280" height="720" src="/path/to/myvideo.mp4" /></video>

If you want to know more about that <video> element, you can read some more about it here: W3C Wiki.

Maybe you have noticed that we don't have to use the <source> element for a valid video element. This works only with a single video source, which is not recommended for optimum cross device/browser support. We have some information on this, read more about multiple sources.

You might also have noticed that there are some attributes that we have added to the <video> element, like class, id, width and height. These attributes are very important. If you don't know why, you should read the player parameters guide.

If you do not want to use responsive scaling, you will have to disable it.