视频cgibug修复完毕

src/views/siteManage/camera/checkVideo.vue

@@ -6,42 +6,18 @@
     @close="closeDialog(0)"
     @open="open"
   >
-    <!-- <div>{{ deviceCode }}</div> -->
-    <!-- <div style="background: #000">
-      <video
-        id="myVideo"
-        :src="videoUrl"
-        style="width: 100%; height: 400px"
-        poster
-        loop="loop"
-        autoplay="autoplay"
-      ></video>
-    </div> -->
-
-    <video
-      id="my-video"
-      class="video-js vjs-default-skin"
-      controls
-      preload="auto"
-      style="width: 100%; height: 400px"
-      poster
-      loop="loop"
-      autoplay="autoplay"
-    >
-      <!-- <source
-        src="http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8"
-        type="application/x-mpegURL"
-      /> -->
-
-      <source :src="videoUrl" type="application/x-mpegURL" />
-    </video>
+
+    <div
+      v-html="randerHtml"
+      style="width: 100%; height: 400px; background: #000"
+    ></div>
+
   </el-dialog>
 </template>
 
 <script>
 import { defineComponent, ref, watchEffect } from 'vue'
 
-
 import videojs from 'video.js'
 import 'videojs-contrib-hls'
 
@@ -59,37 +35,51 @@ export default defineComponent({
     const dialogVisible = ref(false)
 
     const videoUrl = ref('')
+    const options = []
+    const player = ref('')
+    const randerHtml = ref('')
 
     // open(): Dialog弹窗打开之前做的事
     const open = () => {
-      window.setTimeout(function () {
-        videojs(
-          'my-video',
-          {
-            bigPlayButton: false,
-            textTrackDisplay: false,
-            posterImage: true,
-            errorDisplay: false,
-            controlBar: true,
-          },
-          function () {
-            // alert(1);
-            console.log(this)
-
-            this.play()
-          }
-        )
-      }, 5000)
 
       // videoUrl.value = 'http://47.103.74.123/hls/'+props.deviceCode+'.m3u8';
-      videoUrl.value =
-        'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'
+      videoUrl.value ='http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'
+
+      window.setTimeout(getVideo, 100)
+
     }
+    function getVideo() {
+      randerHtml.value =
+        '<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width: 100%; height: 400px" poster loop="loop" autoplay="autoplay" ></video>'
 
-    const options = []
+      let options = {
+        bigPlayButton: false,
+        textTrackDisplay: false,
+        posterImage: true,
+        errorDisplay: false,
+        controlBar: true,
+        autoplay: true,
+        controls: true,
+        sources: [
+          {
+            src: videoUrl.value,
+            type: 'application/x-mpegURL',
+          },
+        ],
+      }
+
+      window.setTimeout(function () {
+        player.value = videojs('my-video', options)
+      }, 100)
+    }
 
     // 关闭弹框
     const closeDialog = () => {
+      if (player.value) {
+        player.value.dispose()
+        randerHtml.value = ''
+      }
+
       context.emit('closeDialog', false)
       dialogVisible.value = false
     }
@@ -105,6 +95,10 @@ export default defineComponent({
       options,
       open,
       videoUrl,
+
+      getVideo,
+      player,
+      randerHtml,
     }
   },
 })

src/views/siteManage/camera/index.vue

@@ -429,7 +429,7 @@ export default defineComponent({
                     store.state.siteCameraTimer = setTimeout(chk_video, 5000)
                   }
                 } else {
-                  if (reCount.value > 20) {
+                  if (reCount.value > 7) {
                  
                     loadingStatus.value = false
                     alert('远程摄像头链接超时，请稍后再试')
@@ -465,12 +465,9 @@ export default defineComponent({
     // 查看视频
     const open_video = (item) => {
       deviceCode.value=item.deviceCode
-      // alert(deviceCode.value)
-      // console.log(item)
       if (openId.value != item.deviceCode) {
         openId.value = item.deviceCode
       }
-      // console.log(onLineVideoList.value)
       for (var n = 0; n < onLineVideoList.value.length; n++) {
         if (onLineVideoList.value[n].DEVICE == openId.value) {
           console.log('第一次打开时设备及其状态')
@@ -505,7 +502,7 @@ export default defineComponent({
             JSON.stringify({
               CMD: 3,
               BODY: {
-                DEVICE: item.DEVICE,
+                DEVICE: item.deviceCode,
                 ACTION: 1,
                 IDX: 7,
               },