HLS.js — HTTP Live Streaming Client for the Web

Introduction

HLS.js is a JavaScript library that brings HTTP Live Streaming (HLS) playback to browsers via the MediaSource Extensions API. It parses M3U8 playlists, manages segment fetching, handles adaptive bitrate switching, and feeds media data into a standard HTML5 video element without requiring native HLS support.

What HLS.js Does

• Parses M3U8 master and variant playlists for multi-quality streams
• Downloads and demuxes MPEG-TS and fMP4 segments in a web worker
• Implements adaptive bitrate (ABR) switching based on bandwidth and buffer
• Supports live, event, and VOD stream types with DVR window management
• Handles DRM via Encrypted Media Extensions for protected content

Architecture Overview

HLS.js runs a loader pipeline that fetches playlist manifests and media segments over HTTP. A transmuxer in a Web Worker converts MPEG-TS containers to fragmented MP4 on the fly. Parsed media is appended to a MediaSource SourceBuffer, and the ABR controller monitors download speed and buffer levels to select the optimal quality level. The entire pipeline is event-driven and modular.

Self-Hosting & Configuration

• Install from npm or load the UMD bundle from a CDN
• Create an Hls instance and call loadSource() with your M3U8 URL
• Attach to any HTML5 video element with attachMedia()
• Tune ABR behavior with config options like maxBufferLength and abrBandWidthFactor
• Enable low-latency mode with lowLatencyMode: true for LL-HLS streams

Key Features

• Works in any browser that supports MediaSource Extensions
• Adaptive bitrate switching with configurable bandwidth estimation
• Web Worker-based transmuxing keeps the main thread responsive
• Low-latency HLS (LL-HLS) support with partial segment loading
• Subtitle and alternative audio track selection

Comparison with Similar Tools

• dash.js — MPEG-DASH reference player; HLS.js focuses exclusively on the HLS protocol
• Shaka Player — Supports both DASH and HLS with DRM; HLS.js is lighter and HLS-specific
• Video.js + videojs-http-streaming — Full player with HLS plugin; HLS.js is the standalone engine
• Native HLS (Safari) — Built into WebKit; HLS.js brings the same capability to Chrome and Firefox

FAQ

Q: Does HLS.js work in Safari? A: Safari has native HLS support. HLS.js detects this and can optionally fall back to native playback.

Q: Can I use HLS.js with a custom player UI? A: Yes. It only handles streaming logic and attaches to a plain video element. Pair it with Plyr or any UI layer.

Q: Does it support DRM-protected streams? A: Yes, via the Encrypted Media Extensions API. Configure emeEnabled and provide license server URLs.

Q: How do I handle live streams with DVR? A: HLS.js exposes a seekable range. Set liveSyncDuration and liveMaxLatencyDuration to control DVR window behavior.

Sources

• https://github.com/video-dev/hls.js
• https://hlsjs.video-dev.org