1.播放器显示问题

2.多屏监控多窗口,窗口变化只有最后一个有时间监听问题
3.回放窗口播放时调整下大小

web_src/src/components/GBRecordDetail.vue

@@ -36,7 +36,6 @@
                   :error="videoError"
                   :message="videoError"
                   :hasAudio="hasAudio"
-                  style="max-height: 100%"
                   fluent autoplay live ></player>
         </div>
         <div class="player-option-box">
@@ -137,8 +136,11 @@
           margin: "10px auto 10px auto"
         },
         playerStyle: {
+          "display": "flex",
+          "justify-content": "center",
+          "align-items": "center",
 			    "margin": "0 auto 20px auto",
-          "height": this.winHeight + "px",
+          "height": this.winHeight + "px"
         },
         winHeight: window.innerHeight - 240,
         playTime: null,
@@ -178,17 +180,25 @@
 
 		},
 		mounted() {
-      this.recordListStyle.height = this.winHeight + "px";
-      this.playerStyle["height"] = this.winHeight + "px";
+      this.$nextTick(() => {
+        this.updateWinHeight();
         this.chooseDate = moment().format('YYYY-MM-DD')
         this.dateChange();
+        window.addEventListener('resize',this.updateWinHeight)
         window.addEventListener('beforeunload', this.stopPlayRecord)
+      })
 		},
 		destroyed() {
 			this.$destroy('recordVideoPlayer');
       window.removeEventListener('beforeunload', this.stopPlayRecord)
+      window.removeEventListener('resize',this.updateWinHeight)
 		},
 		methods: {
+      updateWinHeight(){
+        this.winHeight=window.innerHeight - 240;
+        this.recordListStyle.height = this.winHeight + "px";
+        this.playerStyle.height = this.winHeight + "px";
+      },
       dateChange(){
         if (!this.chooseDate) {
           return;

web_src/src/components/common/jessibuca.vue

@@ -1,6 +1,7 @@
 <template>
-  <div ref="container" @dblclick="fullscreenSwich"
-       style="width:100%;height:518px; min-height: 200px;background-color: #000000;margin:0 auto;position: relative;">
+  <div ref="container">
+    <div ref="playerContainer" @dblclick="fullscreenSwich"
+         style="width:100%;height:100%;background-color: #000000;margin:0 auto;position: relative;">
       <div class="buttons-box" id="buttonsBox">
         <div class="buttons-box-left">
           <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
@@ -21,6 +22,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -46,13 +48,11 @@ export default {
     };
   },
   props: ['videoUrl', 'error', 'hasAudio', 'height'],
-  created() {
+  mounted() {
     let paramUrl = decodeURIComponent(this.$route.params.url)
     this.$nextTick(() => {
       this.updatePlayerDomSize()
-      window.onresize = () => {
-        this.updatePlayerDomSize()
-      }
+      window.addEventListener('resize',this.updatePlayerDomSize)
       if (typeof (this.videoUrl) == "undefined") {
         this.videoUrl = paramUrl;
       }
@@ -63,7 +63,10 @@ export default {
     videoUrl: {
       handler(val, _) {
         this.$nextTick(() => {
+          if(val) {
             this.play(val);
+          }
+          this.updatePlayerDomSize()
         })
       },
       immediate: true
@@ -74,8 +77,7 @@ export default {
       let dom = this.$refs.container;
       let width = dom.parentNode.clientWidth
       let height = (9 / 16) * width
-
-      const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
+      const clientHeight = Math.min(dom.parentNode.clientHeight?dom.parentNode.clientHeight:document.body.clientHeight, document.documentElement.clientHeight)
       if (height > clientHeight) {
         height = clientHeight
         width = (16 / 9) * height
@@ -87,7 +89,7 @@ export default {
     },
     create() {
       let options = {
-        container: this.$refs.container,
+        container: this.$refs.playerContainer,
         autoWasm: true,
         background: "",
         controlAutoHide: false,
@@ -257,6 +259,7 @@ export default {
     this.playing = false;
     this.loaded = false;
     this.performance = "";
+    window.removeEventListener('resize',this.updatePlayerDomSize);
   },
 }
 </script>