类型：开发

描述：

src/layout/components/CoreVideo/index.vue

@@ -62,11 +62,15 @@ let isCollect = ref(0)
   let hlsRefs = []
   let timer = null
   let isDiy = ref(0)
-  const handleItem = (item) => {
-    src.value = item.hlsUrl
+  const handleItem = async (item) => {
+    let res = await getPreviewUrlApi({
+      cameraIndexCode: item.cameraIndexCode,
+      type: 'hls'
+    })
+    src.value = res.data.url
     cameraIndexCode.value = item.cameraIndexCode
-	isCollect.value = item.isCollect
-	isDiy.value = item.isDiy
+    isCollect.value = item.isCollect
+    isDiy.value = item.isDiy
     videoShow.value = true
   }
 
@@ -87,6 +91,69 @@ let isCollect = ref(0)
     src.value = res.data.url
     videoShow.value = true
   }
+  const createPlayer = (cameraIndexCode,videoElement) => {
+    getPreviewUrlApi({
+      type: 'hls',
+      cameraIndexCode: cameraIndexCode
+    }).then(res=>{
+      const url = res.data.url;
+      if(url.startsWith('ws')){
+        const player = mpegtsjs.createPlayer({
+          url: url,
+          type: 'flv',
+          isLive: true,
+          hasAudio: false
+        })
+        player.attachMediaElement(videoElement)
+        player.load()
+        player.play()
+        // 错误处理和重连机制
+        player.on(mpegtsjs.Events.ERROR, (err) => {
+          player.unload();
+          console.error('播放器错误:', err)
+          // 3 秒后尝试重新加载
+          setTimeout(() => {
+            player.load()
+            player.play()
+          }, 3000)
+        })
+
+        hlsRefs.push(player)
+      }
+      else{
+        const player = new Hls({
+          maxBufferLength: 10, // 最大缓冲长度（秒）
+          maxMaxBufferLength: 15, // 缓冲区长度的上限
+          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+        })
+        player.loadSource(url)
+        player.attachMedia(videoElement)
+        player.on(Hls.Events.MANIFEST_PARSED, () => {
+          videoElement.play()
+        })
+        player.on(Hls.Events.ERROR, (event, data) => {
+          // 根据错误类型进行处理
+          if (data.fatal) {
+            switch (data.type) {
+              case Hls.ErrorTypes.NETWORK_ERROR:
+                console.log('网络错误，尝试重新加载');
+                player.startLoad();
+                break;
+              case Hls.ErrorTypes.MEDIA_ERROR:
+                console.log('媒体错误，尝试修复');
+                player.recoverMediaError();
+                break;
+              default:
+                console.log('无法恢复的错误，销毁播放器');
+                // hls.destroy();
+                break;
+            }
+          }
+        })
+        hlsRefs.push(player)
+      }
+    })
+  }
   const getVideoList = async () => {
     let res = await getColletListApi({
       pageNum: 1,
@@ -97,26 +164,7 @@ let isCollect = ref(0)
     nextTick(() => {
       list.value.forEach(async (item, index) => {
         var videoElement = document.getElementById(`video${index}`)
-        const player = mpegtsjs.createPlayer({
-          url: item.hlsUrl,
-          type: 'flv',
-          isLive: true,
-          hasAudio: false
-        })
-        player.attachMediaElement(videoElement)
-        player.load()
-        player.play()
-
-        // 错误处理和重连机制
-        player.on('error', (err) => {
-          console.error('播放器错误:', err)
-          // 3 秒后尝试重新加载
-          setTimeout(() => {
-            player.load()
-            player.play()
-          }, 3000)
-        })
-        hlsRefs.push(player)
+        createPlayer(item.cameraIndexCode,videoElement);
       })
     })
   }