feat hls加载,断网多次加载m3u8

src/utils/video.ts

@@ -1,5 +1,6 @@
 import Hls from 'hls.js';
 let hlsInstance: Hls | null = null;
+// let hlsRetryCount = 0;
 
 export const initHls = (monitorVideoUrl, monitorVideoRef) => {
   const url = monitorVideoUrl.value;
@@ -17,7 +18,18 @@ export const initHls = (monitorVideoUrl, monitorVideoRef) => {
   }
 
   if (Hls.isSupported()) {
-    const hls = new Hls();
+    const hls = new Hls({
+      // ★ ZLM 注册流需要时间，配置自动重试
+      manifestLoadingMaxRetry: 5, // m3u8 加载最多重试20次
+      manifestLoadingRetryDelay: 500, // 每次重试间隔500ms
+      manifestLoadingTimeOut: 5000, // m3u8 请求超时5秒
+      levelLoadingMaxRetry: 20, // ts 分片加载最多重试20次
+      levelLoadingRetryDelay: 500,
+      fragLoadingMaxRetry: 20, // 片段加载重试
+      fragLoadingRetryDelay: 500,
+      lowLatencyMode: false, // 关掉低延迟模式，更稳定
+      startLevel: -1 // 自动选择码率
+    });
     hls.loadSource(url);
     hls.attachMedia(video);
     hls.on(Hls.Events.MANIFEST_PARSED, () => {
@@ -25,6 +37,8 @@ export const initHls = (monitorVideoUrl, monitorVideoRef) => {
       try {
         video.play().catch(() => {});
       } catch (e) {}
+      // 加载成功，重置重试计数
+      // hlsRetryCount = 0;
     });
 
     // ★ 错误自动恢复：hls.js 拿到空 m3u8 或 ts 加载失败时自动重试
@@ -32,8 +46,8 @@ export const initHls = (monitorVideoUrl, monitorVideoRef) => {
       if (data.fatal) {
         switch (data.type) {
           case Hls.ErrorTypes.NETWORK_ERROR:
-            // 网络错误（m3u8 404 / ts 404）→ 重新开始加载
             hls.startLoad();
+            ElMessage.error('网络错误, 请检查网络或重试');
             break;
           case Hls.ErrorTypes.MEDIA_ERROR:
             // 媒体解码错误 → 尝试恢复