Video sources

There are two ways to include video sources into your <video> element. The shorter way is this one:

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

Width and height should of course match your video's actual dimensions.

The drawback of this method is that you can only specify one source. This will work for many browsers (if you use MP4, read below) but there maybe some that need the video file transcoded to WebM or OGG.

Providing multiple sources

If you want to provide more than one format for your video, you will have to pass each of them as a single <source> element.

This is how to provide several sources:

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

In this case, the browser would try to playback the MP4 file. If it failed (maybe because it doesn't know the codec or stuff like this) it will try the next source it finds, WebM in this case.

You can order your sources the way you want to. We'd recommend using MP4 - WebM - OGG, but that's just a feeling we got during the last few years. This order seemed most stable to us.

Resolution switching

If you want to provide a low res and a high res version of your video, just do so. In order to have afterglow recognize your high res (HD) version, add the attribute data-quality="hd" to it. Just like this:

<video class="afterglow" id="myvideo" width="1280" height="720">
  <source type="video/mp4" src="/path/to/myvideo.mp4" />
  <source type="video/mp4" src="/path/to/myvideo_hd.mp4" data-quality="hd"/>
  <source type="video/webm" src="/path/to/myvideo.webm" />
  <source type="video/webm" src="/path/to/myvideo_hd.webm" data-quality="hd"/>
  <source type="video/ogg" src="/path/to/myvideo.ogg" />
  <source type="video/ogg" src="/path/to/myvideo_hd.ogg" data-quality="hd"/>
</video>

If you want to start with the HD version, just provide the HD version in the first place.

There are working examples for both SD first and HD first here.

Resolution switching works only for local sources, not for Youtube clips.

👍

We always use the <source> markup

In most of the examples you can find in the documentation, we use the <source> element even if we don't provide multiple sources. That's just for readability reasons and helps us getting the logic straight. There is the player and the thing it plays, so let's separate them.

Although we like the <source> element, it's not generally recommended over the other way. So find your own way of working things out. ;-)

📘

Which video formats to use?

When it comes to video playback, the most commonly used webbrowsers (like Chrome, Firefox, Safari, Internet Explorer, etc.) are not very reliable. Most of the firms creating those browsers want to establish their own video format and don't really force general standards for HTML5 video.

The result of their fights with each other is that you, as a website creator, have to cope with lot's of different behaviours. Some browsers prefer MP4, others like WebM, OGG is also sometimes mentioned and then there is Windows 7 or some mobile devices not playing HTML5 video at all.

We'd always recommend including your videos as MP4 files which has proven to cover most of the modern browsers and devices. In order to cover as many browsers and devices as possible, you probably should also include WebM and OGG transcoded versions.

🚧

MP4 != MP4

Be aware that MP4 is just a container format. It can contain many different video codecs and bandwidths.

Recommended settings for video encoding with a good balance between quality and bandwidth are:

• video codec: H264
• audio codec: AAC
• video bandwidth: video width in pixels x 1.5 + 500
• audio bandwidth: 96 Kbps - 128 Kbps

These settings result in videos that most devices are able to play back and that should look quite good.

This is just some advice from our experience. The needed bandwidth hugely depends on what your video is actually showing, on the target audience (mobile/desktop), and so on...