全部预览

src/components/supervisory/Index.vue

@@ -74,11 +74,7 @@
   </div>
 </template>
 <script>
-import {
-  getVideoTreeData,
-  getVideoLiveAddressUrl,
-  getAllVideoUrl,
-} from "@/api/index";
+import { getVideoTreeData, getVideoLiveAddressUrl } from "@/api/index";
 require("vue-video-player/node_modules/video.js/dist/video-js.css");
 import videojs from "video.js";
 import "videojs-contrib-hls";
@@ -260,8 +256,37 @@ export default {
           });
         })
         .flat();
-      getAllVideoUrl({ ids: allVideoIdArray.join(",") }).then((res) => {
-        console.log(res);
+
+      allVideoIdArray.map((id, index) => {
+        this.cameraList.push({
+          player: undefined,
+          id: id,
+        });
+        getVideoLiveAddressUrl(id).then((res) => {
+          this.$nextTick(() => {
+            const myVideoDiv = document.getElementById(
+              `video-container-${index + 1}`
+            );
+            myVideoDiv.innerHTML = `<video
+          id="singleVideo${index + 1}"
+          autoplay="autoplay"
+          class="video-js vjs-default-skin"
+        ></video>`;
+            const singlePlayer = videojs(`singleVideo${index + 1}`, {
+              autoplay: true, // 自动播放
+              controls: true, // 控件显示
+              preload: "auto", //定义视频加载模式
+              loop: true, //是否循环播放
+            });
+            singlePlayer.src({
+              src: res.data.live_address_url,
+              type: "application/x-mpegURL",
+            });
+            singlePlayer.play();
+
+            this.cameraList[index].player = singlePlayer;
+          });
+        });
       });
     },
   },