How do I add HLS.js to a custom HTML5 video player?

Include the HLS.js script from a CDN, check for support with Hls.isSupported(), then create a new Hls instance, load your .m3u8 source, and attach it to a video element. The README provides embedding examples with code snippets.

HLS.js vs native HLS in Safari: which should I use?

Use HLS.js for cross-browser consistency and advanced features like adaptive streaming on non-Safari browsers. For Safari on iOS/macOS, native HLS is often sufficient, but HLS.js can provide a unified player experience if needed.

Does HLS.js support HEVC (H.265) video codec?

Yes, HLS.js supports H.265 elementary streams, but compatibility depends on the browser's runtime environment—not all browsers support HEVC, so check your target platforms.

How to handle DRM like Widevine with HLS.js?

Configure the EME controller in HLS.js with the appropriate key system and licenses for FairPlay, PlayReady, or Widevine, but note that DRM support is limited to fragmented MP4 segments.

What are common errors when using HLS.js and how to fix them?

Common issues include CORS errors, unsupported stream formats, or MSE failures. Ensure CORS headers are set, use the built-in analytics to debug, and refer to the error recovery mechanisms in the API docs.

How to reduce the bundle size of HLS.js in my project?

Use the light build of HLS.js, which excludes features like alternate audio, subtitles, and EME, significantly reducing file size as described in the build configuration options.

Open-Awesome

hls.js

NOASSERTIONTypeScriptv1.6.16

A JavaScript library that plays HTTP Live Streaming (HLS) in browsers using MediaSource Extensions.

Visit Website GitHub

16.8k stars2.7k forks0 contributors

What is hls.js?

HLS.js is a JavaScript library that enables playback of HTTP Live Streaming (HLS) video in web browsers using MediaSource Extensions (MSE). It solves the problem of inconsistent native HLS support across browsers by providing a unified, feature-rich client that transmuxes HLS streams into a format compatible with HTML5 video elements.

Target Audience

Web developers and video engineers building video streaming applications or players that require reliable HLS playback across different browsers and platforms, especially where native HLS support is limited or unavailable.

Value Proposition

Developers choose HLS.js for its extensive feature set, including adaptive streaming, DRM support, and broad codec compatibility, along with its active development community and integration with popular video players like JW Player, Video.js, and Flowplayer.

Overview

HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.

Use Cases

Best For

Adding HLS playback to web applications without relying on native browser support
Building custom video players with adaptive bitrate streaming and DRM
Streaming live video events with DVR and multi-quality support
Implementing cross-browser HLS compatibility for video-on-demand platforms
Integrating HLS into existing video player frameworks like Video.js or Clappr
Developing video applications requiring advanced features like captions, subtitles, and alternate audio tracks

Not Ideal For

Environments lacking MediaSource Extensions (MSE) support, such as older browsers or some smart TVs
Server-side rendering setups requiring HLS.js to run in Node.js, as it only exports a dummy object
HLS streams using SAMPLE-AES encryption with fragmented MP4 segments, which is not supported
Projects exclusively targeting Safari on iOS/macOS where native HLS playback is already robust and efficient

Pros & Cons

Pros

Cross-Browser HLS Support

Implements HLS playback using MediaSource Extensions, enabling consistent video streaming across browsers like Chrome, Firefox, and Edge where native HLS support is limited or unavailable.

Comprehensive Streaming Features

Supports adaptive bitrate switching, DRM (FairPlay, Widevine), captions, subtitles, and live DVR, as detailed in the extensive features list, making it suitable for professional video applications.

Strong Ecosystem and Production Use

Widely adopted by major companies like Twitter and DailyMotion, and integrated with popular video players like JW Player and Video.js, ensuring reliability and active community support.

Flexible Build Configuration

Offers light builds that exclude features like alternate audio and EME, allowing developers to reduce bundle size for specific use cases, as mentioned in the build tasks section.

Cons

Partial DRM and Encryption Support

Does not support SAMPLE-AES encryption with fragmented MP4 segments or MPEG-2 TS segments with FairPlay, limiting compatibility with certain DRM requirements as noted in the 'Not Supported' section.

MediaSource Extensions Dependency

Requires browsers to support MSE, making it unusable on platforms without this API, such as older browsers or embedded systems, which restricts its reach.

Configuration Complexity

Setting up advanced features like EME for DRM or custom error handling involves a steep learning curve and detailed API knowledge, which can be challenging for beginners.

Frequently Asked Questions

Related Projects

Video.js

Video.js - open source HTML5 video player

Stars39,832

Forks7,484

Last commit25 days ago

flv.js

HTML5 FLV Player

Stars23,202

Forks3,343

Last commit2 years ago

mediaelement

HTML5 <audio> or <video> player with support for MP4, WebM, and MP3 as well as HLS, Dash, YouTube, Facebook, SoundCloud and others with a common HTML5 MediaElement API, enabling a consistent UI in all browsers.

Stars8,299

Forks1,541

Last commit2 months ago

clappr

An extensible, plugin-oriented, HTML5-first media player for the web

Stars7,486

Forks859

Last commit3 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub