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

xiaoxie

2022-04-28 35b3d7618dfd86c63f20d62d606d3d84dcac094a

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

 web_src/src/components/common/jessibuca.vue

@@ -1,5 +1,5 @@
<template>
  <div id="container" ref="containerId" @dblclick="fullscreenSwich" style="background-color: #eee;margin:0 auto;">
  <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>
@@ -71,7 +71,7 @@
  },
  methods: {
    updatePlayerDomSize() {
      let dom = document.getElementById('container');
      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)
@@ -85,12 +85,11 @@
    },
    create() {
      let options = {};
      console.log(this.$refs.containerId)
      console.log("hasAudio  " + this.hasAudio)

      this.jessibuca = new window.Jessibuca(Object.assign(
        {
          container: this.$refs.containerId,
          container: this.$refs.container,
          videoBuffer: 0.2, // 最大缓冲时长，单位秒
          isResize: true,
          decoder: "static/js/jessibuca/decoder.js",
@@ -247,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;

 web_src/src/components/live.vue

@@ -15,8 +15,7 @@
          <div style="width: 99%;height: 85vh;display: flex;flex-wrap: wrap;background-color: #000;">
            <div v-for="i in spilt" :key="i" class="play-box"
                 :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
                 @click="playerIdx = (i-1)"
            >
                 @click="playerIdx = (i-1)">
              <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{ i }}</div>
              <player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
            </div>
@@ -60,12 +59,13 @@

  computed: {
    liveStyle() {
      if (this.spilt == 1) {
        return {width: '100%', height: '100%'}
      } else if (this.spilt == 4) {
      switch (this.spilt) {
        case 4:
        return {width: '49%', height: '49%'}
      } else if (this.spilt == 9) {
        case 9:
        return {width: '32%', height: '32%'}
        default:
          return {width: '100%', height: '100%'}
      }
    }
  },