Home/Docs/HLS

HLS

Three of the four sources ship a multivariant playlist. The fourth is a single long file on purpose — an ABR ladder would defeat the point of a sustained-throughput asset.

Structure

Each source has one multivariant playlist and one media playlist per rendition:

/media/timecode/hls/master.m3u8
/media/timecode/hls/360p.m3u8
/media/timecode/hls/720p.m3u8
/media/timecode/hls/1080p.m3u8
/media/timecode/hls/720p-init.mp4
/media/timecode/hls/720p-000.m4s …

Why fMP4 rather than transport stream

MPEG-TS segments carry roughly four percent overhead and force a remux step in every player that ultimately feeds Media Source Extensions. fMP4 segments are the same boxes the browser already knows, so a bug you hit here is a bug in your pipeline rather than in a container conversion nobody asked for.

The practical cost is that fMP4 requires HLS version 7 and is not understood by players written against the 2010 specification. If you need to test one of those, use the progressive MP4 renditions instead.

The CODECS attribute

Each variant carries a CODECS string derived by reading the profile and level back from the encoded file:

#EXT-X-STREAM-INF:BANDWIDTH=2628000,RESOLUTION=1280x720,CODECS="avc1.64001f,mp4a.40.2"

This matters more than it looks. A player calls MediaSource.isTypeSupported() with that exact string and drops any variant it reports as unsupported. Overstate the level — say avc1.640028 on a stream that is really level 3.1 — and devices that could have played it refuse it silently, leaving a ladder with holes and no error message anywhere.

In a browser

Safari and iOS WebKit play the playlist from a plain <video> element. Chrome, Firefox and Edge do not implement HLS natively and need a library that feeds segments through Media Source Extensions:

<video id="v" controls></video>
<script src="hls.js"></script>
<script>
  const url = "https://vid.thisaintu.sbs/media/timecode/hls/master.m3u8";
  const v = document.getElementById("v");
  if (v.canPlayType("application/vnd.apple.mpegurl")) {
    v.src = url;                    // Safari, iOS
  } else if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(url);
    hls.attachMedia(v);
  }
</script>

Check canPlayType before Hls.isSupported(), not after. Recent Safari satisfies both, and taking the library path there means testing hls.js instead of the native implementation you probably meant to exercise.

Bandwidth values

BANDWIDTH is the announced ceiling, video plus audio, not a measured average. Since the renditions are capped at that ceiling rather than averaged to it, an ABR player that trusts the number will not be surprised by a peak halfway through.