修复国标录像回放页面BUG

web/src/views/common/jessibuca.vue

@@ -273,6 +273,11 @@ export default {
     },
     setPlaybackRate: function() {
 
+    },
+    resize(width, height) {
+      if (jessibucaPlayer[this._uid]) {
+        jessibucaPlayer[this._uid].resize()
+      }
     }
   }
 }

web/src/views/device/channel/record.vue

@@ -50,7 +50,10 @@
         </div>
       </div>
       <div id="playerBox" style="width: 100%;">
-        <div class="playBox" style="height: calc(100vh - 220px); width: 100%; background-color: #000000">
+        <div :class="{
+          'play-box': true,
+          'play-box-fullscreen': isFullScreen,
+        }">
           <div
             v-if="playLoading"
             style="position: relative; left: calc(50% - 32px); top: 43%; z-index: 100;color: #fff;float: left; text-align: center;"
@@ -88,8 +91,13 @@
             @playTimeChange="showPlayTimeChange"
           />
         </div>
-        <div class="player-option-box">
+        <div :class="{
+          'player-option-box': true,
+          'player-option-box-bottom': isFullScreen
+        }">
+          <div v-if="showTime" class="time-line-show">{{ showTimeValue }}</div>
           <VideoTimeline
+            style="height: 55px"
             ref="Timeline"
             :init-time="initTime"
             :time-segments="timeSegments"
@@ -98,8 +106,6 @@
             @mousedown="timelineMouseDown"
             @mouseup="mouseupTimeline"
           />
-          <div v-if="showTime" class="time-line-show">{{ showTimeValue }}</div>
-        </div>
           <div style="height: 40px; background-color: #383838; display: grid; grid-template-columns: 1fr 400px 1fr">
             <div style="text-align: left;">
               <div class="record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent">
@@ -182,13 +188,13 @@
                   title="下一个"
                   @click="playNext()"
                 />
-              <el-dropdown @command="changePlaySpeed">
+                <el-dropdown @command="changePlaySpeed" placement="top">
                   <a
                     target="_blank"
                     class="record-play-control-item record-play-control-speed"
                     title="倍速播放"
                   >{{ playSpeed }}X</a>
-                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-menu slot="dropdown" :append-to-body="false">
                     <el-dropdown-item
                       v-for="item in playSpeedRange"
                       :key="item"
@@ -201,13 +207,13 @@
             </div>
             <div style="text-align: right;">
               <div class="record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent">
-              <el-dropdown @command="changePlayer">
+                <el-dropdown @command="changePlayer" placement="top">
                   <a
                     target="_blank"
                     class="record-play-control-item record-play-control-speed"
                     title="切换播放器"
                   >{{ playerLabel }}</a>
-                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-menu slot="dropdown" :append-to-body="false">
                     <el-dropdown-item command="jessibuca">Jessibuca</el-dropdown-item>
                     <el-dropdown-item command="webRTC">WebRTC</el-dropdown-item>
                     <el-dropdown-item command="h265web">H265Web</el-dropdown-item>
@@ -232,6 +238,7 @@
           </div>
         </div>
       </div>
+    </div>
     <record-download ref="recordDownload" />
     <chooseTimeRange ref="chooseTimeRange" />
   </div>
@@ -444,8 +451,10 @@ export default {
       const playerHeight = this.$refs.recordVideoPlayer.playerHeight
       screenfull.request(document.getElementById('playerBox'))
       screenfull.on('change', (event) => {
-        this.$refs.recordVideoPlayer.resize(playerWidth, playerHeight)
         this.isFullScreen = screenfull.isFullscreen
+        if (this.$refs.recordVideoPlayer && this.$refs.recordVideoPlayer.resize) {
+          this.$refs.recordVideoPlayer.resize(playerWidth, playerHeight)
+        }
       })
       this.isFullScreen = true
     },
@@ -674,14 +683,31 @@ export default {
 }
 
 .player-option-box {
-  height: 50px
+  height: 95px;
+}
+
+.player-option-box-bottom {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
 }
 
 .time-line-show {
   position: relative;
   color: rgba(250, 249, 249, 0.89);
-  left: calc(50% - 85px);
-  top: -72px;
+  top: -24px;
+  height: 0;
+  width: stretch;
+  float: left;
+  text-align: center;
   text-shadow: 1px 0 #5f6b7c, -1px 0 #5f6b7c, 0 1px #5f6b7c, 0 -1px #5f6b7c, 1.1px 1.1px #5f6b7c, 1.1px -1.1px #5f6b7c, -1.1px 1.1px #5f6b7c, -1.1px -1.1px #5f6b7c;
 }
+.play-box {
+  width: 100%; aspect-ratio: 16 / 9;
+  background-color: #000000;
+  height: calc(100vh - 220px);
+}
+.play-box-fullscreen {
+  height: 100vh !important;
+}
 </style>