Embedding HLS Player in Web Pages: HLS.js in Practice

Quick Start

<video id="video" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<script>
const video = document.getElementById('video');
if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource('https://example.com/video.m3u8');
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = 'https://example.com/video.m3u8';
}
</script>

Handling CORS

CORS is the most common issue in HLS development. Add these response headers on the server:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD
Access-Control-Allow-Headers: Range

Error Recovery

hls.on(Hls.Events.ERROR, (event, data) => {
  if (data.fatal) {
    switch(data.type) {
      case Hls.ErrorTypes.NETWORK_ERROR: hls.startLoad(); break;
      case Hls.ErrorTypes.MEDIA_ERROR:   hls.recoverMediaError(); break;
      default: hls.destroy(); break;
    }
  }
});

ABR Configuration

const hls = new Hls({
  startLevel: -1,         // Auto initial quality
  maxMaxBufferLength: 60, // Max buffer (seconds)
  enableWorker: true,     // Use Web Worker
});

Manual Quality Switching

hls.currentLevel = 1;  // Lock to level 1
hls.currentLevel = -1; // Back to auto