hls.js

hls.js is a JavaScript library that implements an HTTP Live Streaming (HLS) client entirely in the browser, with no plugins or native support required. It works by transmuxing MPEG-2 Transport Stream and fragmented MP4 segments into ISO BMFF fragments that are fed into the browser’s Media Source Extensions (MSE) API, driving playback through a standard HTML5 <video> element.

Maintained by the video-dev community and originally built at Dailymotion, hls.js powers adaptive bitrate streaming, live and VOD playlists, subtitles, alternate audio tracks, and DRM (FairPlay, PlayReady, Widevine) across Chrome, Firefox, Edge, and Safari. It’s the de facto standard for HLS playback outside of Safari’s native support, and is embedded inside major players like Video.js, Shaka Player integrations, and countless custom video products.

What You Get

• A full HLS client: multivariant and media playlist parsing, VOD/live/event playlists, DVR support, and low-latency HLS (Part/Preload-Hint) handling
• Adaptive bitrate switching with three quality-switch modes (instant, smooth, and bandwidth-conservative) plus an emergency switch-down under bandwidth drops
• Transmuxing of MPEG-2 TS (H.264/H.265, AAC, MP3, AC-3) and passthrough of fmp4/CMAF segments into ISO BMFF fragments, performed off the main thread in a Web Worker
• DRM support via Encrypted Media Extensions for FairPlay, PlayReady, and Widevine with fmp4 segments, plus AES-128 and SAMPLE-AES decryption
• CEA-608/708 captions, WebVTT subtitles, alternate audio track rendition selection, and Content Steering for multi-CDN failover
• A rich event system exposing every internal network and video event plus built-in playback session metrics for analytics

Common Use Cases

• Playing live and VOD HLS streams in Chrome, Firefox, and Edge, where there is no native HLS support in the <video> element
• Building custom video players or embedding HLS playback inside existing players (Video.js and others ship hls.js-based tech plugins)
• Streaming DRM-protected content (FairPlay/PlayReady/Widevine) to web audiences without falling back to Flash or native app wrappers
• Low-latency live streaming (sports, events, live commerce) using HLS Part/Preload-Hint and configurable live-sync tuning
• Multi-CDN video delivery with automatic failover via redundant playlists or EXT-X-CONTENT-STEERING

Under The Hood

Architecture hls.js is built around a central Hls class (src/hls.ts) that wires together a set of single-responsibility controllers registered on a shared EventEmitter. PlaylistLoader and m3u8-parser.ts fetch and parse multivariant/media playlists into Level and Fragment models; LevelController, StreamController, AudioStreamController, and SubtitleStreamController (all extending BaseStreamController, src/controller/base-stream-controller.ts) drive segment scheduling and buffering per media type; AbrController picks the active quality level from bandwidth estimates; and BufferController/GapController manage the MediaSource SourceBuffer and stall recovery. Segment data flows through TransmuxerInterface into a Web Worker (transmuxer-worker.ts) running tsdemuxer.ts/mp4demuxer.ts (demux) and mp4-remuxer.ts/passthrough-remuxer.ts (remux) so CPU-heavy work never blocks the main thread, with FragmentTracker reconciling what’s actually been buffered. Errors surface through ErrorController for centralized fatal/non-fatal recovery. Tech Stack The library is authored in strict TypeScript (94% of the codebase) with a small JavaScript polyfill layer, built via Rollup into ESM/CJS/light bundles (rollup.config.js, build-config.js), type-checked with tsc and packaged with @microsoft/api-extractor for a single rolled-up .d.ts. Runtime dependencies are minimal and deliberately vendored-small: eventemitter3 for pub/sub, url-toolkit for URL resolution, and the @svta/cml-* packages for CMCD/ID3/utility helpers — there is no framework dependency, keeping the library embeddable anywhere a <video> element exists. Code Quality The tests/ directory contains 62+ unit/functional/e2e test files covering crypto, demuxers, loaders, remuxers, and controllers individually (tests/unit/controller, tests/unit/demuxer, etc.), run via Karma/Mocha with cross-browser matrices on Sauce Labs and BrowserStack in CI, plus a full ESLint + Prettier + tsc --noEmit gate wired into npm run sanity-check and a Husky pre-commit hook. Naming is consistent (*Controller, *Loader, *Track) and the strict TypeScript config forces explicit typing across the 137 source files, though the sheer surface area (26k+ LOC) and deep import graph in hls.ts mean the learning curve for contributors is nontrivial. API Design The public API centers on one Hls class with a small, well-documented surface: loadSource(), attachMedia(), event constants on Hls.Events, and a single HlsConfig object for the ~60 tunable parameters (buffer thresholds, ABR behavior, live-sync windows) documented exhaustively in docs/API.md. Getting started is genuinely three lines of code (new Hls(), attachMedia(), loadSource()), but the deep configurability that makes it production-ready for broadcasters also means newcomers face a large options surface before they need to touch most of it.