Getting Started with hls.js: Tutorial & Examples

hls.js is an open-source JavaScript library that implements the HLS protocol in the browser. It enables playback of HLS streams on any modern browser by converting the streaming format into something the HTML5 video element can play via the Media Source Extensions (MSE) API.

The library handles playlist parsing, segment downloading, adaptive bitrate switching, AES-128 decryption, and buffer management — all automatically.

Install hls.js via npm or include it from a CDN:

npm install hls.js

// Or via CDN
// <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

import Hls from 'hls.js';

const video = document.getElementById('video');
const url = 'https://example.com/stream.m3u8';

if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource(url);
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    video.play();
  });
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  // Safari native HLS support
  video.src = url;
}

Key events to handle:

// Manifest loaded
hls.on(Hls.Events.MANIFEST_PARSED, () => { /* levels available */ });

// Quality level switched
hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
  console.log('Switched to level', data.level);
});

// Error handling
hls.on(Hls.Events.ERROR, (event, data) => {
  if (data.fatal) {
    hls.destroy();
  }
});