# HLS.js — HTTP Live Streaming Client for the Web

> A JavaScript library that implements an HLS client, enabling playback of HTTP Live Streaming content in any browser with MediaSource Extensions support.

## Install

Save as a script file and run:

# HLS.js — HTTP Live Streaming Client for the Web

## Quick Use
```bash
npm install hls.js
# In your app:
# import Hls from 'hls.js';
# const hls = new Hls();
# hls.loadSource('https://example.com/stream.m3u8');
# hls.attachMedia(document.getElementById('video'));
```

## 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

---
Source: https://tokrepo.com/en/workflows/hls-js-http-live-streaming-client-web-2e872258
Author: Script Depot