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)">
@@ -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
@@ -245,5 +254,3 @@ export default {
 }
 </script>
 <style lang="scss"></style>
-  
-