From 03e0ea4cb87073ab6e73190856fa61ec3f85a105 Mon Sep 17 00:00:00 2001
From: lixuefeng <1126141216@qq.com>
Date: Thu, 4 Dec 2025 16:52:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B1=BB=E5=9E=8B=EF=BC=9A=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=20=E6=8F=8F=E8=BF=B0=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/request.js                          |   9 +-
 src/assets/images/loading.gif               | Bin 0 -> 12719 bytes
 src/components/VideoDialog/index.vue        |  22 +-
 src/layout/components/CoreVideo/allList.vue |  99 ++++++--
 src/layout/components/CoreVideo/index.vue   |  96 ++++++--
 src/views/collect/components/video-box.vue  | 150 ++++++------
 src/views/hotel/components/video-box.vue    | 211 ++++++++---------
 src/views/monitor/components/box-2.vue      | 243 +++++++++-----------
 8 files changed, 458 insertions(+), 372 deletions(-)
 create mode 100644 src/assets/images/loading.gif

diff --git a/src/api/request.js b/src/api/request.js
index cd728b7..de259be 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -41,10 +41,11 @@ instance.interceptors.response.use(
     if (res.data.code == 200) {
       return res.data
     } else {
-      ElMessage({
-        message: res.data.msg,
-        type: 'error'
-      })
+        console.error("接口请求错误："+res.data.msg)
+      // ElMessage({
+      //   message: res.data.msg,
+      //   type: 'error'
+      // })
       return Promise.reject(res.data)
     }
   },
diff --git a/src/assets/images/loading.gif b/src/assets/images/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..89a6ecfba21b09d04c2b599a7bdf04ae6b8b335c
GIT binary patch
literal 12719
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
R2eWhb%s+~wOhrK8{{vO#Gg$xt

literal 0
HcmV?d00001

diff --git a/src/components/VideoDialog/index.vue b/src/components/VideoDialog/index.vue
index 3a94f65..79acf3c 100644
--- a/src/components/VideoDialog/index.vue
+++ b/src/components/VideoDialog/index.vue
@@ -66,13 +66,20 @@
   import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
   import { getColletDiyApi } from '@/api/home'
   import pubSub from 'pubsub-js'
-  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'
   let command = ref('')
 
@@ -149,6 +156,7 @@
   const handleAction = async (e) => {
     if (e == STOP) {
       ACTION = '1'
+      command.value = e
     } else {
       ACTION = '0'
       command.value = e
diff --git a/src/layout/components/CoreVideo/allList.vue b/src/layout/components/CoreVideo/allList.vue
index 789f84c..2ad909a 100644
--- a/src/layout/components/CoreVideo/allList.vue
+++ b/src/layout/components/CoreVideo/allList.vue
@@ -12,7 +12,7 @@
           @click="handleItem(item)"
         >
           <div class="item-unfollow" @click.stop="handleCollect(item.cameraIndexCode, index)">取消关注</div>
-          <video class="item-video" :id="'video' + index" muted autoplay :controls="false">
+          <video class="item-video" :id="'videoall' + index" muted autoplay :controls="false">
             <source type="application/x-mpegURL" />
           </video>
           <p>
@@ -36,13 +36,14 @@
 </template>
 
 <script setup>
-  import { getVideoListApi,getColletListApi } from '@/api/home'
+import {getVideoListApi, getColletListApi, getPreviewUrlApi} from '@/api/home'
   import { postVideoCollectApi } from '@/api/monitor'
 
   import primary from '@/assets/images/item-primary.png'
 
   import Hls from 'hls.js'
   import pubSub from 'pubsub-js'
+import mpegtsjs from "mpegts.js";
 
   let modelValue = defineModel()
   let isCollect = ref(0)
@@ -75,11 +76,15 @@
   	  getVideoList()
     })
   }
-  const handleItem = (item) => {
-	  console.log(item,'iscollect')
-    src.value = item.hlsUrl
-	isCollect.value = item.isCollect
-	isDiy.value = item.isDiy
+  const handleItem = async (item) => {
+    console.log(item, 'iscollect')
+    let res = await getPreviewUrlApi({
+      cameraIndexCode: item.cameraIndexCode,
+      type: 'hls'
+    })
+    src.value = res.data.url
+    isCollect.value = item.isCollect
+    isDiy.value = item.isDiy
     cameraIndexCode.value = item.cameraIndexCode
     videoShow.value = true
   }
@@ -110,27 +115,77 @@
     list.value = []
     getVideoList()
   }
+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(params)
     list.value = res.data
     total.value = res.total
     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)
+        var video = document.getElementById(`videoall${index}`)
+        createPlayer(item.cameraIndexCode,video);
       })
     })
   }
diff --git a/src/layout/components/CoreVideo/index.vue b/src/layout/components/CoreVideo/index.vue
index 4ee9d1c..07fa3c5 100644
--- a/src/layout/components/CoreVideo/index.vue
+++ b/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);
       })
     })
   }
diff --git a/src/views/collect/components/video-box.vue b/src/views/collect/components/video-box.vue
index ef73b76..260b48c 100644
--- a/src/views/collect/components/video-box.vue
+++ b/src/views/collect/components/video-box.vue
@@ -35,14 +35,14 @@
 								</div>
 								<video
 									class="video-item__video"
-									:id="'monitorVideo' + element.cameraIndexCode"
+									:id="'collectmonitorVideo' + element.cameraIndexCode"
 									preload="auto"
 									muted
 									autoplay
 									:controls="false"
 								/>
 								<p class="video-item__title--primary">
-									{{ element.cameraName || element.scenicAreaId }}
+									{{ element.cameraName || element.cameraIndexCode }}
 								</p>
 							</div>
 						</div>
@@ -52,29 +52,7 @@
 			</div>
 
 	    </div>
-	   <!-- <div class="pagination">
-	      <el-pagination
-	        v-model:current-page="params.pageNum"
-	        :page-size="params.pageSize"
-	        :total="total"
-	        background
-	        layout="prev, pager, next"
-	        @current-change="currentChange"
-	      />
-	    </div> -->
 	  </div>
-
-   <!-- <ul class="videos">
-      <li class="video-item" v-for="item in 8" :key="item">
-        <img src="@/assets/images/sxzd.png" alt="" />
-        <p>
-          <span>核心路段：这是一条信息说明</span>
-        </p>
-      </li>
-    </ul> -->
-  <!--  <div class="pagination-box">
-      <el-pagination background layout="prev, pager, next" :total="1000" />
-    </div> -->
   </div>
   <VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" @isDiyChange="isDiyChange" :isDiy="isDiy"  :isCollect="isCollect" :src="videoSrc" />
 </template>
@@ -94,13 +72,20 @@
 	import emptyIco from '@/assets/images/n-icon.png'
 	import { debounce } from 'lodash'
   import mpegtsjs from "mpegts.js";
-	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 cond = ref(false)
 	let ACTION = '0'
 	let hlsRefs = []
@@ -170,7 +155,6 @@
 		params.businessVideoDisplayPosition = ''
 	  let res = await getVideCollectCate(params)
 	  videoList.value = res.data
-	  console.log(res,videoList.value.length,'ressssssssssssss')
 	  if(videoList.value.length<=3){
 		  grad.value = 3
 	  }else if(videoList.value.length<=6){
@@ -206,6 +190,7 @@
 	const handleAction = async (e) => {
 	  if (e == STOP) {
 	    ACTION = '1'
+      command.value = e
 	  } else {
 	    ACTION = '0'
 	    command.value = e
@@ -280,6 +265,69 @@
 	    if (type == 100) initVideo()
 	  }, 1000)
 	}
+  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 initVideo = () => {
 	  clearHlsRefs()
 	  nextTick(() => {
@@ -287,42 +335,8 @@
 
 			it.videos.forEach((item,index)=>{
 				 setTimeout(() => {
-					const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`)
-           if(item.hlsUrl.startsWith('ws')){
-             const player = mpegtsjs.createPlayer({
-               url: item.hlsUrl,
-               type: 'flv',
-               isLive: true,
-               hasAudio: false
-             })
-             player.attachMediaElement(video)
-             player.load()
-             player.play()
-
-             // 错误处理和重连机制
-             player.on('error', (err) => {
-               // 3 秒后尝试重新加载
-               setTimeout(() => {
-                 player.load()
-                 player.play()
-               }, 3000)
-             })
-           }else{
-             if(item.hlsUrl){
-               const hls = new Hls({
-                 maxBufferLength: 10, // 最大缓冲长度（秒）
-                 maxMaxBufferLength: 15, // 缓冲区长度的上限
-                 maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-               })
-               hls.loadSource(item.hlsUrl)
-               hls.attachMedia(video)
-               hls.on(Hls.Events.MANIFEST_PARSED, () => {
-                 video.play()
-               })
-               hlsRefs.push(hls)
-             }
-           }
-
+					const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
+           createPlayer(item.cameraIndexCode,video);
 				 }, 1000)
 
 			})
diff --git a/src/views/hotel/components/video-box.vue b/src/views/hotel/components/video-box.vue
index 8db7c89..ffe8515 100644
--- a/src/views/hotel/components/video-box.vue
+++ b/src/views/hotel/components/video-box.vue
@@ -78,7 +78,7 @@
 	          </div>
 	          <video
 	            class="video-item__video"
-	            :id="'monitorVideo' + index"
+	            :id="'hotelmonitorVideo' + index"
 	            preload="auto"
 	            muted
 	            autoplay
@@ -87,7 +87,7 @@
 	            <source type="application/x-mpegURL" />
 	          </video>
 	          <p class="video-item__title--primary">
-	            {{ item.cameraName || item.scenicAreaId }}
+	            {{ item.cameraName || item.cameraIndexCode }}
 	          </p>
 	        </div>
 	      </div>
@@ -146,15 +146,15 @@
 	          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">
-	              {{ item.cameraName || item.scenicAreaId }}
+	              {{ item.cameraName || item.cameraIndexCode }}
 	            </p>
 	            <video
 	              class="item-img"
-	              :id="'monitorVideo' + index"
+	              :id="'hotelmonitorVideo' + index"
 	              muted
 	              autoplay
 	              :controls="false"
@@ -197,13 +197,20 @@
 	import emptyIco from '@/assets/images/n-icon.png'
 	import { debounce } from 'lodash'
   import mpegtsjs from "mpegts.js";
-	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 cond = ref(false)
 	let ACTION = '0'
 	let hlsRefs = []
@@ -259,6 +266,7 @@
 	const handleAction = async (e) => {
 	  if (e == STOP) {
 	    ACTION = '1'
+      command.value = e
 	  } else {
 	    ACTION = '0'
 	    command.value = e
@@ -311,6 +319,69 @@
 	  videoList.value = []
 	  getRegionsList()
 	}
+  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 getRegionsList = async()=>{
 		clearHlsRefs()
@@ -325,59 +396,8 @@
 			   nextTick(() => {
 				   if(!videoList.value.length) return false
 			     videoList.value.forEach(async (x, index) => {
-             const video = document.getElementById(`monitorVideo${index}`)
-             if(x.hlsUrl.startsWith('ws')){
-               const player = mpegtsjs.createPlayer({
-                 url: x.hlsUrl,
-                 type: 'flv',
-                 isLive: true,
-                 hasAudio: false
-               })
-               player.attachMediaElement(video)
-               player.load()
-               player.play()
-               // 错误处理和重连机制
-               player.on('error', (err) => {
-                 // 3 秒后尝试重新加载
-                 setTimeout(() => {
-                   player.load()
-                   player.play()
-                 }, 3000)
-               })
-             }else{
-               const hls = new Hls({
-                 maxBufferLength: 10, // 最大缓冲长度（秒）
-                 maxMaxBufferLength: 15, // 缓冲区长度的上限
-                 maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-               })
-               hls.loadSource(x.hlsUrl)
-               hls.attachMedia(video)
-               hls.on(Hls.Events.MANIFEST_PARSED, () => {
-                 video.play()
-               })
-               hls.on(Hls.Events.ERROR, (event, data) => {
-                 console.error('HLS 播放器遇到错误:', data);
-                 // 根据错误类型进行处理
-                 // initVideo()
-                 if (data.fatal) {
-                   switch (data.type) {
-                     case Hls.ErrorTypes.NETWORK_ERROR:
-                       console.log('网络错误，尝试重新加载');
-                       hls.startLoad();
-                       break;
-                     case Hls.ErrorTypes.MEDIA_ERROR:
-                       console.log('媒体错误，尝试修复');
-                       hls.recoverMediaError();
-                       break;
-                     default:
-                       console.log('无法恢复的错误，销毁播放器');
-                       // hls.destroy();
-                       break;
-                   }
-                 }})
-               hlsRefs.push(hls)
-             }
-
+             const video = document.getElementById(`hotelmonitorVideo${index}`)
+             createPlayer(x.cameraIndexCode,video);
 			     })
 			   })
 		    } else {
@@ -392,12 +412,17 @@
 
 	}
 	let thisVideo = ref(null)
-	const handleItemVideo = (url, type, code,item) => {
-	  thisVideo.value = item
-	  videoLog.value = 2
-	  cameraIndexCode.value = code
-	  setTimeout(() => {
-      if(url.startsWith('ws')){
+	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')) {
         const player = mpegtsjs.createPlayer({
           url: url,
           type: 'flv',
@@ -416,7 +441,7 @@
             player.play()
           }, 3000)
         })
-      }else{
+      } else {
         hlsRef = new Hls({
           maxBufferLength: 10, // 最大缓冲长度（秒）
           maxMaxBufferLength: 15, // 缓冲区长度的上限
@@ -429,47 +454,15 @@
         })
       }
 
-	    if (type == 100) initVideo()
-	  }, 1000)
-	}
+      if (type == 100) initVideo()
+    }, 1000)
+  }
 	const initVideo = () => {
 	  clearHlsRefs()
 	  nextTick(() => {
 	    videoList.value.forEach(async (item, index) => {
-	      const video = document.getElementById(`monitorVideo${index}`)
-        if(item.hlsUrl.startsWith('ws')){
-          var player = mpegtsjs.createPlayer({
-            url: item.hlsUrl,
-            type: 'flv',
-            isLive: true,
-            hasAudio: false
-          })
-          player.attachMediaElement(video)
-          player.load()
-          player.play()
-
-          // 错误处理和重连机制
-          player.on('error', (err) => {
-            // 3 秒后尝试重新加载
-            setTimeout(() => {
-              player.load()
-              player.play()
-            }, 3000)
-          })
-        }else{
-          const hls = new Hls({
-            maxBufferLength: 10, // 最大缓冲长度（秒）
-            maxMaxBufferLength: 15, // 缓冲区长度的上限
-            maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-          })
-          hls.loadSource(item.hlsUrl)
-          hls.attachMedia(video)
-          hls.on(Hls.Events.MANIFEST_PARSED, () => {
-            video.play()
-          })
-          hlsRefs.push(hls)
-        }
-
+	      const video = document.getElementById(`hotelmonitorVideo${index}`)
+        createPlayer(item.cameraIndexCode,video);
 	    })
 	  })
 	}
diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue
index 4d5f005..68deba7 100644
--- a/src/views/monitor/components/box-2.vue
+++ b/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 {