如何在单个HTML文件中播放多个.m3u8视频流？

• 每个视频对应独立Hls实例：不能共用单个Hls对象处理多个<video>标签，必须为每个视频元素创建专属的Hls实例，分别加载对应流地址。示例代码：

  const videoList = document.querySelectorAll('video');
  videoList.forEach((video, idx) => {
    if (!Hls.isSupported()) return;
    const hlsInstance = new Hls();
    // 替换为你的多流地址，这里按索引区分示例
    hlsInstance.loadSource(`http://10.66.123.1/streams/${idx+1}/hls/stream.m3u8`);
    hlsInstance.attachMedia(video);
    
    hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
      // 建议通过用户交互触发播放，避免浏览器自动播放限制
      video.play().catch(err => console.log(`视频${idx+1}播放失败:`, err));
    });
  });
  

• 处理浏览器自动播放限制：现代浏览器默认禁止无用户交互的自动播放，多视频批量播放必须绑定用户操作（比如点击按钮）触发。示例：

  document.querySelector('#play-all-btn').addEventListener('click', () => {
    document.querySelectorAll('video').forEach(video => {
      video.play().catch(err => console.error(err));
    });
  });
  

• 优化资源占用：多视频同时播放会消耗大量带宽和CPU，可通过以下方式缓解：

  • 对非焦点视频调用hlsInstance.currentLevel = 0切换到最低码率
  • 暂停未处于查看区域的视频，仅保留当前监控窗口的视频播放
  • 限制同时播放的视频数量，超出的先加载缓存但不启动播放

• 添加错误监控与恢复：给每个Hls实例绑定错误事件，定位具体问题并尝试自动恢复：

  hlsInstance.on(Hls.Events.ERROR, (event, data) => {
    if (!data.fatal) return;
    switch(data.type) {
      case Hls.ErrorTypes.NETWORK_ERROR:
        console.log(`视频${idx+1}网络异常，尝试重试`);
        hlsInstance.startLoad();
        break;
      case Hls.ErrorTypes.MEDIA_ERROR:
        console.log(`视频${idx+1}媒体解析异常，尝试恢复`);
        hlsInstance.recoverMediaError();
        break;
      default:
        console.error(`视频${idx+1}无法恢复的错误:`, data);
        hlsInstance.destroy();
        break;
    }
  });
  

• 排查跨域问题：如果视频流地址与页面域名不同，确认服务器已配置CORS响应头（如Access-Control-Allow-Origin），否则会出现加载失败的情况，可在浏览器控制台查看是否有跨域报错。

内容的提问来源于stack exchange，提问作者Muhammad Khan