最近在项目中接入了HLS直播流，发现Web端播放存在不少坑点。经过两周的踩坑和优化，总结出这套实战方案，特别适合中级开发者快速掌握HLS播放的核心要点。

一、为什么HLS在Web端这么难搞？

1. 延迟累积问题：HLS默认分片时长6秒，加上3个分片缓冲策略，延迟往往超过20秒
2. 兼容性陷阱：
3. iOS Safari强制使用系统播放器
4. Android Chrome需要MSE支持
5. PC端存在跨域限制
6. 性能瓶颈：
7. TS解封装消耗主线程性能
8. 连续丢包导致卡顿恢复慢

二、技术选型对比表

| 方案 | 首帧时间(ms) | 内存占用(MB) | 兼容性 | 开发成本 | |---------------|-------------|-------------|-------------|---------| | 原生video标签 | 800-1200 | 50-80 | 全平台 | 低 | | hls.js | 1200-1800 | 100-150 | 除iOS Safari | 中 | | Video.js | 1500-2000 | 120-180 | 全平台 | 高 | | MediaSource | 600-900 | 70-100 | 仅现代浏览器 | 极高 |

三、hls.js核心实现

import Hls from 'hls.js';

const initPlayer = (videoEl: HTMLVideoElement, url: string) => {
  if (Hls.isSupported()) {
    const hls = new Hls({
      maxBufferLength: 30,     // 最大缓冲时长(秒)
      maxMaxBufferLength: 60,  // 绝对最大缓冲
      enableWorker: true,      // 启用Web Worker
    });

    hls.loadSource(url);
    hls.attachMedia(videoEl);

    hls.on(Hls.Events.ERROR, (_, data) => {
      if (data.fatal) {
        switch(data.type) {
          case Hls.ErrorTypes.NETWORK_ERROR:
            hls.startLoad();
            break;
          case Hls.ErrorTypes.MEDIA_ERROR:
            hls.recoverMediaError();
            break;
        }
      }
    });
  } else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
    // iOS原生支持
    videoEl.src = url;
  }
};

四、关键优化策略

1. 预加载优化：

   // 在用户hover时预加载
   playerElement.addEventListener('mouseover', () => {
     hls.startLoad(-1); // 预加载第一个分片
   });

2. Web Worker配置：

   new Hls({
     enableWorker: true,
     workerPath: '/path/to/hls.worker.js'
   });

3. 码率切换策略：

   hls.on(Hls.Events.FRAG_LOADED, () => {
     const bw = hls.bandwidthEstimate;
     if (bw > 5000000) hls.currentLevel = 3; // 切换到高清
     else if (bw > 2000000) hls.currentLevel = 1;
   });

五、避坑经验

1. CORS必现问题：
2. 服务器需返回Access-Control-Allow-Origin: *

3. 带cookie时需设置withCredentials: true

4. iOS自动播放技巧：

   // 必须用户交互后触发
   document.addEventListener('touchstart', () => {
     video.muted = true;
     video.play();
   }, { once: true });

5. 内存泄漏检测：

   const observer = new PerformanceObserver((list) => {
     list.getEntries().forEach(entry => {
       if (entry.jsHeapSizeLimit / entry.totalJSHeapSize < 1.5) {
         console.warn('Memory leak detected!');
       }
     });
   });
   observer.observe({ entryTypes: ['memory'] });

六、未来优化方向

可以尝试用WebCodecs API绕过MSE的限制，直接控制解码流程。不过目前浏览器兼容性较差，建议先做好现有方案的极致优化。

经过这些优化后，我们的播放器首帧时间从2.1s降到850ms，卡顿率降低73%。关键是要根据业务场景选择合适的参数组合，建议用A/B测试验证不同配置的效果。