类型：开发

描述：

src/views/monitor/components/box-2.vue

@@ -93,16 +93,21 @@
                 @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
             >关注
             </div>
-            <video
-                class="video-item__video"
-                :id="'monitorVideo' + index"
-                preload="auto"
-                muted
-                autoplay
-                :controls="false"
-            >
-              <source type="application/x-mpegURL"/>
-            </video>
+            <view class="video-item__video">
+              <video
+                  :id="'monitorVideo' + index"
+                  preload="auto"
+                  class="video-item__video"
+                  muted
+                  autoplay
+                  :controls="false"
+              >
+
+                <source type="application/x-mpegURL"/>
+              </video>
+            </view>
+
+
             <p class="video-item__title--primary">
               {{ item.cameraName || item.cameraIndexCode }}
             </p>
@@ -171,7 +176,7 @@
               class="item"
               v-for="(item, index) in videoList"
               :key="index"
-              @click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
+              @click="handleItemVideo(item.hlsUrl, 101, item.cameraIndexCode,item)"
           >
             <div>
               <p class="item-title--primary">
@@ -212,13 +217,20 @@ import pubSub from 'pubsub-js'
 import Hls from 'hls.js'
 import HlsPlayer from "@/components/HlsPlayer/index.vue";
 
-const Z00M_IN = 'ZOOM_IN' // 焦距变大
-const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
-const UP = 'UP' // 上转
-const DOWN = 'DOWN' // 下转
-const LEFT = 'LEFT' // 左转
-const RIGHT = 'RIGHT' // 右转
-const STOP = 'STOP' // 停止操作
+// const Z00M_IN = 'ZOOM_IN' // 焦距变大
+// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+// const UP = 'UP' // 上转
+// const DOWN = 'DOWN' // 下转
+// const LEFT = 'LEFT' // 左转
+// const RIGHT = 'RIGHT' // 右转
+// const STOP = 'STOP' // 停止操作
+const Z00M_IN = 'zoomin' // 焦距变大
+const Z00M_OUT = 'zoomout' // 焦距变小
+const UP = 'up' // 上转
+const DOWN = 'down' // 下转
+const LEFT = 'left' // 左转
+const RIGHT = 'right' // 右转
+const STOP = 'stop' // 停止操作
 let ACTION = '0'
 
 const props = {
@@ -267,62 +279,7 @@ const initVideo = () => {
   nextTick(() => {
     videoList.value.forEach(async (item, index) => {
       const videoElement = document.getElementById(`monitorVideo${index}`)
-      if(item.hlsUrl.startsWith("ws")){
-        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)
-      }else{
-        const player = new Hls({
-          maxBufferLength: 10, // 最大缓冲长度（秒）
-          maxMaxBufferLength: 15, // 缓冲区长度的上限
-          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-        })
-        player.loadSource(item.hlsUrl)
-        player.attachMedia(videoElement)
-        player.on(Hls.Events.MANIFEST_PARSED, () => {
-          videoElement.play()
-        })
-        player.on(Hls.Events.ERROR, (event, data) => {
-          // console.error('HLS 播放器遇到错误:', data);
-          // hls.startLoad();
-          // initVideo()
-          // 根据错误类型进行处理
-          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)
-      }
+      createPlayer(item.cameraIndexCode,videoElement);
     })
   })
 }
@@ -388,12 +345,17 @@ const handleBack = () => {
   initVideo()
 }
 let thisVideo = ref(null)
-const handleItemVideo = (url, type, code, item) => {
+const handleItemVideo = async (url, type, code, item) => {
+  let res = await getPreviewUrlApi({
+    cameraIndexCode: code,
+    type: 'hls'
+  })
+  url = res.data.url
   thisVideo.value = item
   videoLog.value = 2
   cameraIndexCode.value = code
   setTimeout(() => {
-    if(url.startsWith('ws')){
+    if (url.startsWith('ws')) {
       hlsRef = mpegtsjs.createPlayer({
         url: url,
         type: 'flv',
@@ -407,12 +369,13 @@ const handleItemVideo = (url, type, code, item) => {
       hlsRef.on('error', (err) => {
         console.error('播放器错误:', err)
         // 3 秒后尝试重新加载
+        hlsRef.unload()
         setTimeout(() => {
           hlsRef.load()
           hlsRef.play()
         }, 3000)
       })
-    }else{
+    } else {
       hlsRef = new Hls({
         maxBufferLength: 10, // 最大缓冲长度（秒）
         maxMaxBufferLength: 15, // 缓冲区长度的上限
@@ -431,6 +394,7 @@ const handleItemVideo = (url, type, code, item) => {
 const handleAction = async (e) => {
   if (e == STOP) {
     ACTION = '1'
+    command.value = e
   } else {
     ACTION = '0'
     command.value = e
@@ -461,7 +425,6 @@ const handleCamera = async (itemCode, resource) => {
     type: 'hls',
     cameraIndexCode: itemCode
   })
-  console.log(res, 'rrrrrrrrrrrrrr')
   cameraIndexCode.value = itemCode;
   isCollect.value = resource.isCollect
   isDiy.value = resource.isDiy
@@ -510,6 +473,69 @@ watch(
     },
     {immediate: 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 (val) => {
   try {
     if (loading.value) return
@@ -523,70 +549,11 @@ const getVideoList = async (val) => {
     let res = await getVideoListApi(params)
     total.value = res.total
     if (res.data.length > 0) {
-
       videoList.value = res.data
-      // console.log(videoList.value,'1111111111111111111111')
-      // postVideoRemain()
       nextTick(() => {
         videoList.value.forEach(async (x, index) => {
           const videoElement = document.getElementById(`monitorVideo${index}`)
-          if(x.hlsUrl.startsWith('ws')){
-            const player = mpegtsjs.createPlayer({
-              url: x.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)
-          }else{
-            const player = new Hls({
-              maxBufferLength: 10, // 最大缓冲长度（秒）
-              maxMaxBufferLength: 15, // 缓冲区长度的上限
-              maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-            })
-            player.loadSource(x.hlsUrl)
-            player.attachMedia(videoElement)
-            player.on(Hls.Events.MANIFEST_PARSED, () => {
-              videoElement.play()
-            })
-            player.on(Hls.Events.ERROR, (event, data) => {
-              // console.error('HLS 播放器遇到错误:', data);
-              // hls.startLoad();
-              // initVideo()
-              // 根据错误类型进行处理
-              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)
-         }
+          createPlayer(x.cameraIndexCode,videoElement);
         })
       })
     } else {