What is hls.js?

hls.js is a JavaScript library that plays HLS streams through Media Source Extensions in compatible browsers. It attaches M3U8-based media to an HTML video element when native HLS is unavailable.

How hls.js works

hls.js implements playlist loading, adaptation, demultiplexing or transmuxing, buffering, and recovery around a browser’s Media Source Extensions interface. It feeds supported elementary streams into SourceBuffer objects connected to a normal video element. The library supplies streaming logic but relies on the browser for final audio and video decoding. Web playback stacks place it between HLS delivery and application controls, while selectively deferring to native playback where appropriate.

Key facts

  1. hls.js cannot add a codec decoder that the browser lacks: Media Source Extensions may accept the container workflow while append operations still fail for an unsupported codec or profile.
  2. Cross-origin playlists, keys, initialization data, and segments need suitable CORS responses because the library fetches them with browser networking rather than through native opaque media loading.
  3. Applications should use the library’s manifest, level, buffering, and error events for telemetry and recovery; a successful attachment to a video element does not prove the stream is playable.

When hls.js matters

Web developers use hls.js to control adaptive playback and inspect stream events in MSE-capable browsers. Native HLS or another fallback remains necessary where Media Source Extensions are unavailable.

Turn media knowledge into a working pipeline

Connect uploads, processing, AI, storage, and delivery through one declarative API — with the encoding stack, scaling, and format churn handled for you.

Try Transloadit for free