src/assets/css/main.css

@@ -2047,7 +2047,6 @@
   height: 100%;
   display: flex;
   align-items: center;
-  position: relative;
 }
 
 .realTime .page-content .realTime-bottom .left-view > div .video-js {
@@ -2055,12 +2054,6 @@
   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,17 +2185,12 @@
                     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,10 +10,7 @@
                     <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-if="!imgUrl" ref="videoPlayer" class="video-js">
+                        <div v-else ref="videoPlayer" class="video-js" id="video-js"></div>
-                            <div id="video-js"></div>
-                        </div>
-
                         <div class="video-control">
                             <div class="video-btn-big">
                                 <div class="top" @mousedown="downStart(0)">
@@ -77,7 +74,7 @@ export default {
             deviceState: 1,
             statusInterval: null,//status状态的Interval
             player: null,
-            imgUrl: '',
+            imgUrl:'',
             url: '',
             nowNum: -1,
         }
@@ -170,7 +167,7 @@ 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);
@@ -201,7 +198,7 @@ export default {
             //     });
             if (num != -1) {
                 this.api.cameraStop(nowDevice.cameraSerialNumber, nowDevice.cameraChannelNumber, num).then(res => {
-                    this.nowNum = -1
+                    this.nowNum=-1
                 })
             }
 
@@ -222,12 +219,6 @@ 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
@@ -243,8 +234,8 @@ export default {
                         this.url = res.data.data.ezopen
                         this.accesstoken = res.data.data.accesstoken
                         this.createVideoNew(res.data.data.accesstoken)
-                    } else {
+                    }else{
-                        this.imgUrl = nowDevice.hls
+                            this.imgUrl=nowDevice.hls
                         }
                 })
             }
@@ -254,3 +245,5 @@ export default {
 }
 </script>
 <style lang="scss"></style>
+  
+