类型：开发

描述：

src/layout/components/CoreVideo/index.vue

@@ -10,25 +10,14 @@
         :key="index"
         @click="handleItem(item)"
       >
-        <HlsPlayer :url="item.hlsUrl" />
-        <div class="item-unfollow" @click.stop="handleUnfollow(item.cameraIndexCode, index)">取消关注</div>
-      <!--  <div>
-          <p class="item-title--primary">
-            {{ item.cameraName || item.cameraIndexCode }}
-          </p>
-         
-          <video
+        <video
             class="item-img"
             :id="'video' + index"
             muted
             autoplay
             :controls="false"
-			:src="item.hlsUrl"
-            controlsList="nodownload"
-          >
-            <source src="" type="application/x-mpegURL" />
-          </video>
-        </div> -->
+        ></video>
+        <div class="item-unfollow" @click.stop="handleUnfollow(item.cameraIndexCode, index)">取消关注</div>
       </li>
     </ul>
   </div>
@@ -50,6 +39,7 @@
 
   import { useWebSocket } from '@/hooks/socket'
   import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
+  import mpegtsjs from "mpegts.js";
 
   const { dataRes } = useWebSocket(
     `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/securityAlerts`
@@ -73,7 +63,6 @@ let isCollect = ref(0)
   let timer = null
   let isDiy = ref(0)
   const handleItem = (item) => {
-	  console.log(item,'1111111111111111111111111')
     src.value = item.hlsUrl
     cameraIndexCode.value = item.cameraIndexCode
 	isCollect.value = item.isCollect
@@ -82,12 +71,12 @@ let isCollect = ref(0)
   }
 
   const postVideoRemain = () => {
-    timer = setInterval(() => {
-		if(!list.value.length) return false;
-      postVideoRemainApi({
-        cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
-      })
-    }, 1500)
+    // timer = setInterval(() => {
+		// if(!list.value.length) return false;
+    //   postVideoRemainApi({
+    //     cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
+    //   })
+    // }, 1500)
   }
 
   const getPreviewUrl = async (code) => {
@@ -104,28 +93,32 @@ let isCollect = ref(0)
       pageSize: 5
     })
     list.value = res.data
-	postVideoRemain()
 	if (timer) clearInterval(timer)
-	// console.log(list.value,'list.valuelist.valuelist.valuelist.value')
-    // nextTick(() => {
-    //   list.value.forEach(async (item, index) => {
-    //     var video = document.getElementById(`video${index}`)
-    //     const hls = new Hls({
-    //       enableWorker: false, // 禁用 Worker 来避免额外的线程
-    //       enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
-    //       cache: true, // 启用缓存
-    //       maxBufferLength: 10, // 最大缓冲长度（秒）
-    //       maxMaxBufferLength: 15, // 缓冲区长度的上限
-    //       maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
-    //     })
-    //     hls.loadSource(item.hlsUrl)
-    //     hls.attachMedia(video)
-    //     hls.on(Hls.Events.MANIFEST_PARSED, () => {
-    //       video.play()
-    //     })
-    //     hlsRefs.push(hls)
-    //   })
-    // })
+    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)
+      })
+    })
   }
   watch(
     () => list.value,
@@ -166,9 +159,9 @@ let isCollect = ref(0)
 	pubSub.subscribe('videoIsDiy', (msg, data) => {
 		console.log(data,'收藏 ++++++++++++++')
 		getVideoList()
-	
-	
-		
+
+
+
 	})
   })