修复多屏播放时播放器样式错位

xiaoxie

2022-04-28 35b3d7618dfd86c63f20d62d606d3d84dcac094a

 web_src/src/components/common/jessibuca.vue

@@ -1,6 +1,5 @@
<template>
  <div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000"
       @dblclick="fullscreenSwich">
  <div ref="container" @dblclick="fullscreenSwich" style="background-color: #eee;margin:0 auto;">
    <div class="buttons-box" id="buttonsBox">
      <div class="buttons-box-left">
        <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
@@ -45,7 +44,7 @@
      forceNoOffscreen: false,
    };
  },
  props: ['containerId', 'videoUrl', 'error', 'hasAudio', 'height'],
  props: ['videoUrl', 'error', 'hasAudio', 'height'],
  mounted() {
    window.onerror = (msg) => {
      // console.error(msg)
@@ -72,19 +71,25 @@
  },
  methods: {
    updatePlayerDomSize() {
      let dom = document.getElementById(this.containerId);
      const width = dom.parentNode.clientWidth
      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)
      if (height > clientHeight) {
        height = clientHeight
        width = (16 / 9) * height
      }

      dom.style.width = width + 'px';
      dom.style.height = (9 / 16) * width + "px";
      dom.style.height = height + "px";
    },
    create() {
      let options = {};
      console.log(this.$refs[this.containerId])
      console.log("hasAudio  " + this.hasAudio)

      this.jessibuca = new window.Jessibuca(Object.assign(
        {
          container: this.$refs[this.containerId],
          container: this.$refs.container,
          videoBuffer: 0.2, // 最大缓冲时长，单位秒
          isResize: true,
          decoder: "static/js/jessibuca/decoder.js",
@@ -205,19 +210,6 @@

      });
    },
    resize() {
      if (this.jessibuca) {
        this.jessibuca.resize()
        this.$nextTick(() => {
          let dom = document.getElementById(this.containerId);
          if (dom.parentNode.clientHeight == 0) {
            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) {
      this.play(this.videoUrl)
    },
@@ -254,7 +246,7 @@
        this.jessibuca.destroy();
      }
      if (document.getElementById("buttonsBox") == null) {
        document.getElementById("container").appendChild(this.btnDom)
        this.$refs.container.appendChild(this.btnDom)
      }
      this.jessibuca = null;
      this.playing = false;