动态计算播放器尺寸，保持16：9比例，避免出现黑框或固定大小无法缩放

web_src/src/components/common/jessibuca.vue

@@ -1,5 +1,6 @@
 <template>
-  <div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000" @dblclick="fullscreenSwich">
+  <div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000"
+       @dblclick="fullscreenSwich">
     <div class="buttons-box" id="buttonsBox">
       <div class="buttons-box-left">
         <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
@@ -9,10 +10,11 @@
         <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i>
       </div>
       <div class="buttons-box-right">
-        <span class="jessibuca-btn">{{kBps}} kb/s</span>
+        <span class="jessibuca-btn">{{ kBps }} kb/s</span>
         <!--          <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
         <!--          <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>-->
-        <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('截图','png',0.5)" style="font-size: 1rem !important"></i>
+        <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('截图','png',0.5)"
+           style="font-size: 1rem !important"></i>
         <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
         <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
         <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
@@ -43,20 +45,17 @@ export default {
       forceNoOffscreen: false,
     };
   },
-    props: ['containerId','videoUrl', 'error', 'hasAudio', 'height'],
+  props: ['containerId', 'videoUrl', 'error', 'hasAudio', 'height'],
-    mounted () {
+  mounted() {
     window.onerror = (msg) => {
       // console.error(msg)
     };
     let paramUrl = decodeURIComponent(this.$route.params.url)
-       this.$nextTick(() =>{
+    this.$nextTick(() => {
-         let dom = document.getElementById(this.containerId);
+      this.updatePlayerDomSize()
-         if (dom.parentNode.clientHeight == 0) {
+      window.onresize = () => {
-           dom.style.height = (9/16 ) * dom.clientWidth + "px"
+        this.updatePlayerDomSize()
       }
-         dom.style.height = dom.parentNode.clientHeight + "px";
-         dom.style.width = dom.parentNode.clientWidth + "px";
-
       if (typeof (this.videoUrl) == "undefined") {
         this.videoUrl = paramUrl;
       }
@@ -65,14 +64,20 @@ export default {
       this.play(this.videoUrl)
     })
   },
-    watch:{
+  watch: {
-        videoUrl(newData, oldData){
+    videoUrl(newData, oldData) {
       this.play(newData)
     },
-        immediate:true
+    immediate: true
   },
   methods: {
-        create(){
+    updatePlayerDomSize() {
+      let dom = document.getElementById(this.containerId);
+      const width = dom.parentNode.clientWidth
+      dom.style.width = width + 'px';
+      dom.style.height = (9 / 16) * width + "px";
+    },
+    create() {
       let options = {};
       console.log(this.$refs[this.containerId])
       console.log("hasAudio  " + this.hasAudio)
@@ -82,14 +87,14 @@ export default {
           container: this.$refs[this.containerId],
           videoBuffer: 0.2, // 最大缓冲时长，单位秒
           isResize: true,
-              decoder:"static/js/jessibuca/decoder.js",
+          decoder: "static/js/jessibuca/decoder.js",
           useMSE: false,
           showBandwidth: false,
           isFlv: true,
           // text: "WVP-PRO",
           // background: "static/images/zlm-logo.png",
           loadingText: "加载中",
-              hasAudio: typeof (this.hasAudio) =="undefined"? true: this.hasAudio,
+          hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
           debug: false,
           supportDblclickFullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
           operateBtns: {
@@ -200,20 +205,20 @@ export default {
 
       });
     },
-       resize(){
+    resize() {
-          if (this.jessibuca){
+      if (this.jessibuca) {
         this.jessibuca.resize()
-            this.$nextTick(() =>{
+        this.$nextTick(() => {
           let dom = document.getElementById(this.containerId);
           if (dom.parentNode.clientHeight == 0) {
-                dom.style.height = (9/16 ) * dom.clientWidth + "px"
+            dom.style.height = (9 / 16) * dom.clientWidth + "px"
           }
           dom.style.height = dom.parentNode.clientHeight + "px";
           dom.style.width = dom.parentNode.clientWidth + "px";
         })
       }
     },
-        playBtnClick: function (event){
+    playBtnClick: function (event) {
       this.play(this.videoUrl)
     },
     play: function (url) {
@@ -257,17 +262,17 @@ export default {
       this.performance = "";
 
     },
-        eventcallbacK: function(type, message) {
+    eventcallbacK: function (type, message) {
       // console.log("player 事件回调")
       // console.log(type)
       // console.log(message)
     },
-        fullscreenSwich: function (){
+    fullscreenSwich: function () {
       let isFull = this.isFullscreen()
       this.jessibuca.setFullscreen(!isFull)
       this.fullscreen = !isFull;
     },
-        isFullscreen: function (){
+    isFullscreen: function () {
       return document.fullscreenElement ||
         document.msFullscreenElement ||
         document.mozFullScreenElement ||
@@ -286,7 +291,7 @@ export default {
 </script>
 
 <style>
-  .buttons-box{
+.buttons-box {
   width: 100%;
   height: 28px;
   background-color: rgba(43, 51, 63, 0.7);
@@ -298,8 +303,9 @@ export default {
   bottom: 0;
   user-select: none;
   z-index: 10;
-  }
+}
-  .jessibuca-btn{
+
+.jessibuca-btn {
   width: 20px;
   color: rgb(255, 255, 255);
   line-height: 27px;
@@ -308,9 +314,10 @@ export default {
   cursor: pointer;
   text-align: center;
   font-size: 0.8rem !important;
-  }
+}
-  .buttons-box-right {
+
+.buttons-box-right {
   position: absolute;
   right: 0;
-  }
+}
 </style>