在网页中嵌入 HLS 播放器：HLS.js 开发实战

快速开始

只需几行代码，即可在网页中嵌入 HLS 播放器：

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

处理 CORS 问题

跨域资源共享（CORS）是 HLS 开发中最常见的问题。服务器端需要添加以下响应头：

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

事件监听与错误处理

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;
    }
  }
});

自适应码率配置

const hls = new Hls({
  startLevel: -1,         // 自动选择初始码率
  maxMaxBufferLength: 60, // 最大缓冲时长（秒）
  enableWorker: true,     // 启用 Web Worker
});

手动切换清晰度

// 列出所有清晰度
hls.levels.forEach((level, i) => {
  console.log(`Level ${i}: ${level.height}p, ${level.bitrate}bps`);
});
hls.currentLevel = 1;  // 固定到第1档
hls.currentLevel = -1; // 恢复自动切换