1

src/assets/css/main.css

@@ -2047,6 +2047,7 @@
   height: 100%;
   display: flex;
   align-items: center;
+  position: relative;
 }
 
 .realTime .page-content .realTime-bottom .left-view > div .video-js {
@@ -2054,6 +2055,12 @@
   height: 100%;
 }
 
+.realTime .page-content .realTime-bottom .left-view > div #video-js {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
 .realTime .page-content .realTime-bottom .left-view > div .video-control {
   width: 400px;
   display: flex;

src/assets/css/main.scss

@@ -2185,12 +2185,17 @@
                     height: 100%;
                     display: flex;
                     align-items: center;
+                    position: relative;
 
                     .video-js {
                         width: calc(100% - 400px);
                         height: 100%;
                     }
-
+                    #video-js{
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                    }
                     .video-control {
                         width: 400px;
                         display: flex;

src/views/page/videoMonitoring.vue

@@ -10,7 +10,10 @@
                     <div ref="monitor" class="monitor" id="monitor">
                         <!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
                         <img v-if="imgUrl" class="video-js" :src="imgUrl" alt="">
-                        <div v-else ref="videoPlayer" class="video-js" id="video-js"></div>
+                        <div v-if="!imgUrl" ref="videoPlayer" class="video-js">
+                            <div id="video-js"></div>
+                        </div>
+
                         <div class="video-control">
                             <div class="video-btn-big">
                                 <div class="top" @mousedown="downStart(0)">
@@ -74,7 +77,7 @@ export default {
             deviceState: 1,
             statusInterval: null,//status状态的Interval
             player: null,
-            imgUrl:'',
+            imgUrl: '',
             url: '',
             nowNum: -1,
         }
@@ -167,11 +170,11 @@ export default {
             //     .catch(error => {
             //         console.error(error);
             //     });
-            this.api.cameraStart(nowDevice.cameraSerialNumber,nowDevice.cameraChannelNumber,num).then(res => {
+            this.api.cameraStart(nowDevice.cameraSerialNumber, nowDevice.cameraChannelNumber, num).then(res => {
                 setTimeout(() => {
                     that.upEnd()
                 }, 10000);
-                })
+            })
         },
         upEnd() {
             const store = this.$store.state
@@ -198,7 +201,7 @@ export default {
             //     });
             if (num != -1) {
                 this.api.cameraStop(nowDevice.cameraSerialNumber, nowDevice.cameraChannelNumber, num).then(res => {
-                    this.nowNum=-1
+                    this.nowNum = -1
                 })
             }
 
@@ -219,6 +222,12 @@ export default {
                 width: divW,  // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
                 height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
             })
+            window.onresize = () => {
+                this.player.reSize(
+                    this.$refs.videoPlayer.clientWidth,
+                    this.$refs.videoPlayer.clientHeight
+                );
+            };
         },
         dataInit() {
             const store = this.$store.state
@@ -234,9 +243,9 @@ export default {
                         this.url = res.data.data.ezopen
                         this.accesstoken = res.data.data.accesstoken
                         this.createVideoNew(res.data.data.accesstoken)
-                    }else{
-                            this.imgUrl=nowDevice.hls
-                        }
+                    } else {
+                        this.imgUrl = nowDevice.hls
+                    }
                 })
             }
         },
@@ -245,5 +254,3 @@ export default {
 }
 </script>
 <style lang="scss"></style>
-  
-