hls.js
hls.js is a free JavaScript player library that plays HLS streams in browsers without built-in HLS support. It uses Media Source Extensions to download segments, switch quality levels and feed video to the HTML5 video element. hls.js also supports captions, multiple audio tracks, low-latency HLS and DRM through EME.
Why it matters
Without hls.js or a similar library, HLS streams fail in Chrome, Firefox and Edge on desktop. hls.js gives a business one streaming format across browsers without licensing costs. Because it has no interface, teams still need to build or choose controls around it.
How it works
- The page checks whether the browser can use hls.js, and if so attaches it to a video element.
- hls.js downloads the .m3u8 playlist and picks a starting quality level.
- It fetches segments, converts them if needed, and appends them through Media Source Extensions.
- It monitors bandwidth and buffer and switches quality as conditions change.
hls.js vs Video.js: which should I use?
Use hls.js if you only need an HLS playback engine and will build your own controls. Use Video.js if you want a ready-made player interface with themes and plugins. Video.js includes its own streaming engine, so you usually do not need both. Teams with a custom design system often pick hls.js; teams wanting speed pick Video.js.
Do I need hls.js on Safari?
Usually not. Safari on Mac, iPhone and iPad plays HLS natively when you set the stream address as the video source. hls.js is needed for browsers like Chrome and Firefox that lack native HLS. Many sites check for hls.js support first and fall back to native playback where it is not needed.
Where it's used
SaaS products and online learning platforms add hls.js to play adaptive HLS streams in desktop and Android browsers, pairing it with their own controls since it has no interface.
By the numbers
- hls.js is released under the Apache 2.0 license and supports Low-Latency HLS, CEA-608/708 captions and DRM through EME. (hls.js on GitHub)
