大屏监控修改H5player

gassafetyprogress-web/src/components/bigWindow/VideoView.vue

@@ -13,7 +13,7 @@
       <img src="@/assets/mapImages/closeBtn.png" alt="" />
     </div>
     <div class="box videoBox">
-      <div id="video"></div>
+      <div id="player" ></div>
     </div>
     <span slot="footer" class="dialog-footer">
       <!-- <el-button type="primary" @click="dialogVisible = false"
@@ -25,35 +25,103 @@
 </template>
 <script>
 import WasmPlayer from "@easydarwin/easywasmplayer"; //导入WasmPlayer.js
-
+import { getPreviewURLs } from "@/api/video/artemis"
+//const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
+const IS_MOVE_DEVICE = true;
+const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
 export default {
   data() {
     return {
       // dialogVisible: true,
       // AfterClose: true,
+      queryParam: {
+        cameraIndexCode: ""
+      },
+      player: null,
+      videoOpenNum: -1,
+      queryParam: {
+        cameraIndexCode: ""
+      },
     };
   },
   watch: {},
   mounted() {
     setTimeout(() => {
-      this.player = new WasmPlayer(null, "video", this.callBack, {
-        Height: true,
-      });
-      this.player.play(this.deviceData.usr, 1);
+      if(!window.JSPlugin){
+        this.loadScript("/h5player/h5player.min.js").then(() =>{
+          this.createPlayer();
+        this.init()
+      })
+
+      }else{
+        this.createPlayer();
+        this.init()
+      }
   }, 1);
+    // setTimeout(() => {
+    //   this.player = new WasmPlayer(null, "video", this.callBack, {
+    //     Height: true,
+    //   });
+    //   this.player.play(this.deviceData.usr, 1);
+    // }, 1);
   },
   methods: {
     show() {
       this.dialogVisible = true;
     },
-    handleClose() {
-      console.log("关闭");
-      this.player.destroy(this.deviceData.usr);
-      // document.body.removeChild(this.$refs.videoBox.$el);
+    // handleClose() {
+    //   console.log("关闭");
+    //   this.player.destroy(this.deviceData.usr);
+    //   // document.body.removeChild(this.$refs.videoBox.$el);
+    // },
+    init() {
+      // 设置播放容器的宽高并监听窗口大小变化
+      window.addEventListener('resize', () => {
+        this.player.JS_Resize()
+    })
+    },
+    createPlayer() {
+      this.player = new window.JSPlugin({
+        szId: 'player',
+        szBasePath: "/h5player",
+        iMaxSplit: 4,
+        iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
+        openDebug: true,
+        oStyle: {
+          borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
+        }
+      })
+      this.open();
+    },
+    open(){
+      this.queryParam.cameraIndexCode = this.deviceData.resourceId;
+      getPreviewURLs(this.queryParam).then(response =>{
+          if(response.data.code == '0'){
+            this.videoOpenNum++;
+            let url = response.data.data.url;
+            //let index = this.player.currentWindowIndex;
+            this.player.JS_Play(url,{playURL: url, mode:"0" }, this.videoOpenNum%4).then(() => {
+                console.log('realplay success')
+              },
+              e => { console.error(e) }
+              )
+            }
+      });
+    },
+    loadScript(src){
+      return new Promise(reslove =>{
+        let scpritE1 = document.createElement("script");
+      scpritE1.type = "text/javascript";
+      scpritE1.src = src;
+      scpritE1.onload = () => {
+        reslove();
+      }
+      document.body.appendChild(scpritE1);
+    })
     },
     callBack() {},
     close() {
-      this.handleClose();
+      //this.handleClose();
       this.mapClass.infowindowClose();
     },
   },
@@ -81,8 +149,8 @@ export default {
     padding: 5px 12px 10px 10px;
     width: 350px;
     height: 200px;
-    #video {
-      height: 100%;
+    #player {
+      height: 190px;
     }
   }
 }