HLS scheduling pipeline

On a narrow screen, swipe the diagram horizontally to keep its labels readable.

Architecture verified

hls.js loads HLS and uses browser media capabilities for playback. Its controllers handle loading, stream processing and buffering. Transmuxing reorganizes encoded data for the playback path; it does not transcode an unsupported codec into a supported one.

Minimal mounting pattern synthesis

// Illustrative JS module; src must be a real HLS manifest URL.
import Hls from "hls.js";
export function mountHls(video, src, onFailure) {
  if (video.canPlayType("application/vnd.apple.mpegurl")) {
    const onError = () => onFailure(video.error);
    video.addEventListener("error", onError);
    video.src = src;
    return () => {
      video.removeEventListener("error", onError);
      video.pause(); video.removeAttribute("src"); video.load();
    };
  }
  if (!Hls.isSupported()) {
    onFailure(new Error("HLS is unsupported")); return () => {};
  }
  const hls = new Hls();
  hls.on(Hls.Events.ERROR, (_, detail) => {
    if (detail.fatal) onFailure(detail);
  });
  hls.attachMedia(video); hls.loadSource(src);
  return () => hls.destroy();
}

Decision and trade-off synthesis

Choose this engine when you need direct HLS diagnostics and can supply the UI. Native-first is the sample’s policy, not a universal rule: choosing MSE can expose additional engine control at the cost of another code path. Test the target browser/codec combination.

Pitfall → improvement synthesis

CORS must work for all HLS resources, not just the playlist. A fatal error needs a bounded, classified recovery policy; endless retries hide expired authorization. Add metrics and cleanup before advanced ABR tuning.