视频不显示问题解决

src/views/NewPages/iframe4.vue

@@ -2,26 +2,61 @@
   <div class="iframe4">
     <!-- <iframe src="http://10.75.17.10/doc/page/preview.asp" frameborder="0" class="iframe-2"></iframe> -->
     <div class="iframe-1">
-      <div class="iframe4-title" @click="jumpUrl('/save/personnel')">人员健康</div>
+      <div class="iframe4-title" @click="jumpUrl('/save/personnel')">
+        人员健康
+      </div>
       <personnel></personnel>
     </div>
     <div class="iframe-2">
       <div class="iframe4-title">视频监视</div>
-      <div class="videoDiv" v-for="(pItem, pIndex) in videoArray" :key="pIndex" width="95%" height="48vh" @click="openVideoDialog(pItem)">
+      <div
+        class="videoDiv"
+        v-for="(pItem, pIndex) in videoArray"
+        :key="pIndex"
+        width="95%"
+        height="48vh"
+        @click="openVideoDialog(pItem)"
+      >
         <div class="mask"></div>
-        <iframe :src="pItem.url + pItem.token" />
+        <!-- <iframe :src="pItem.url + pItem.token" /> -->
+        <hlsVideo :code="pItem.code" :class="pItem.class" />
       </div>
     </div>
     <div class="iframe-3">
-      <div class="iframe4-title" @click="openUrl('http://192.168.1.52/webiui/#/online')">智能安全帽</div>
-      <iframe src="http://192.168.1.52/webiui/#/online" frameborder="0"></iframe>
+      <div
+        class="iframe4-title"
+        @click="openUrl('http://192.168.1.52/webiui/#/online')"
+      >
+        智能安全帽
+      </div>
+      <iframe
+        src="http://192.168.1.52/webiui/#/online"
+        frameborder="0"
+      ></iframe>
     </div>
     <div class="iframe-4">
       <div class="iframe4-title">数字孪生</div>
       <div class="iframe-4-body"></div>
     </div>
-    <el-dialog top="50px" v-model="showVideoDialog" width="80vw" :destroy-on-close="true" :custom-class="videoDialogClass">
-      <iframe class="videoBoxiframe" width="100%" height="600px" :src="dialogVideoUrl" />
+    <el-dialog
+      top="50px"
+      v-model="showVideoDialog"
+      width="80vw"
+      :destroy-on-close="true"
+      :custom-class="videoDialogClass"
+    >
+      <!-- <iframe
+        class="videoBoxiframe"
+        width="100%"
+        height="600px"
+        :src="dialogVideoUrl"
+      /> -->
+      <hlsVideo
+        class="videoBoxiframe"
+        width="95%"
+        height="800px"
+        :code="dialogVideoUrl"
+      />
     </el-dialog>
   </div>
 </template>
@@ -29,51 +64,64 @@
 <script>
 import personnel from "./personnel.vue";
 import PanelSand from "@com/coms/panel/panel-sand.vue";
+import hlsVideo from "../SandTable/component/hls.vue";
 export default {
   setup() {},
-  components: { personnel, PanelSand },
+  components: { personnel, PanelSand, hlsVideo },
   data() {
     return {
       showVideoDialog: false,
       dialogVideoUrl: "",
+      // videoArray: [
+      //   {
+      //     url: "http://10.155.32.4:9984/ws.html",
+      //     token: "?token=SBQ_FDC_SC&autoplay=true",
+      //     switch: true,
+      //   },
+      //   {
+      //     url: "http://10.155.32.4:9984/ws.html",
+      //     token: "?token=NSS_FDC_SC&autoplay=true",
+      //     switch: true,
+      //   },
+      //   {
+      //     url: "http://10.155.32.4:9984/ws.html",
+      //     token: "?token=QS_FDC_SC&autoplay=true",
+      //     switch: true,
+      //   },
+      //   {
+      //     url: "http://10.155.32.4:9984/ws.html",
+      //     token: "?token=MHS_FDC_SC&autoplay=true",
+      //     switch: true,
+      //   },
+      //   {
+      //     url: "http://10.155.32.4:9984/ws.html",
+      //     token: "?token=XS_FDC_SC&autoplay=true",
+      //     switch: true,
+      //   },
+      //   {
+      //     url: "http://10.155.32.4:9984/ws.html",
+      //     token: "?token=PL_GDC_SC&autoplay=true",
+      //     switch: true,
+      //   },
+      // ],
       videoArray: [
-        {
-          url: "http://10.155.32.4:9984/ws.html",
-          token: "?token=SBQ_FDC_SC&autoplay=true",
-          switch: true,
-        },
-        {
-          url: "http://10.155.32.4:9984/ws.html",
-          token: "?token=NSS_FDC_SC&autoplay=true",
-          switch: true,
-        },
-        {
-          url: "http://10.155.32.4:9984/ws.html",
-          token: "?token=QS_FDC_SC&autoplay=true",
-          switch: true,
-        },
-        {
-          url: "http://10.155.32.4:9984/ws.html",
-          token: "?token=MHS_FDC_SC&autoplay=true",
-          switch: true,
-        },
-        {
-          url: "http://10.155.32.4:9984/ws.html",
-          token: "?token=XS_FDC_SC&autoplay=true",
-          switch: true,
-        },
-        {
-          url: "http://10.155.32.4:9984/ws.html",
-          token: "?token=PL_GDC_SC&autoplay=true",
-          switch: true,
-        },
+        { code: "SBQ_FDC_SC", class: "", switch: true },
+        { code: "NSS_FDC_SC", class: "", switch: true },
+        { code: "QS_FDC_SC", class: "", switch: true },
+        { code: "MHS_FDC_SC", class: "", switch: true },
+        { code: "XS_FDC_SC", class: "", switch: true },
+        { code: "PL_GDC_SC", class: "", switch: true },
       ],
     };
   },
   methods: {
     openVideoDialog(item) {
-      if (item.url && item.token) {
-        this.dialogVideoUrl = item.url + item.token;
+      // if (item.url && item.token) {
+      //   this.dialogVideoUrl = item.url + item.token;
+      //   this.showVideoDialog = true;
+      // }
+      if (item.code) {
+        this.dialogVideoUrl = item.code;
         this.showVideoDialog = true;
       }
     },