guzijian / wvp-GB28181-pro · Commits

Commit 2e90c7e7febce929820df65cc597fd08c2f1dc7b

Authored by 648540858
Committed by GitHub
2 parents a53fe776 35b3d761

Merge pull request #461 from hotcoffie/wvp-28181-2.0 

修复多屏播放时播放器样式错位
Inline Side-by-side
Showing 2 changed files with 12 additions and 13 deletions
web_src/src/components/common/jessibuca.vue
  View file @2e90c7e
1 1 <template>
2   - <div id="container" ref="containerId" @dblclick="fullscreenSwich" style="background-color: #eee;margin:0 auto;">
  2 + <div ref="container" @dblclick="fullscreenSwich" style="background-color: #eee;margin:0 auto;">
3 3 <div class="buttons-box" id="buttonsBox">
4 4 <div class="buttons-box-left">
5 5 <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
... ... @@ -71,7 +71,7 @@ export default {
71 71 },
72 72 methods: {
73 73 updatePlayerDomSize() {
74   - let dom = document.getElementById('container');
  74 + let dom = this.$refs.container;
75 75 let width = dom.parentNode.clientWidth
76 76 let height = (9 / 16) * width
77 77 const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
... ... @@ -85,12 +85,11 @@ export default {
85 85 },
86 86 create() {
87 87 let options = {};
88   - console.log(this.$refs.containerId)
89 88 console.log("hasAudio " + this.hasAudio)
90 89  
91 90 this.jessibuca = new window.Jessibuca(Object.assign(
92 91 {
93   - container: this.$refs.containerId,
  92 + container: this.$refs.container,
94 93 videoBuffer: 0.2, // 最大缓冲时长，单位秒
95 94 isResize: true,
96 95 decoder: "static/js/jessibuca/decoder.js",
... ... @@ -247,7 +246,7 @@ export default {
247 246 this.jessibuca.destroy();
248 247 }
249 248 if (document.getElementById("buttonsBox") == null) {
250   - document.getElementById("container").appendChild(this.btnDom)
  249 + this.$refs.container.appendChild(this.btnDom)
251 250 }
252 251 this.jessibuca = null;
253 252 this.playing = false;
... ...
web_src/src/components/live.vue
  View file @2e90c7e
... ... @@ -15,8 +15,7 @@
15 15 <div style="width: 99%;height: 85vh;display: flex;flex-wrap: wrap;background-color: #000;">
16 16 <div v-for="i in spilt" :key="i" class="play-box"
17 17 :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
18   - @click="playerIdx = (i-1)"
19   - >
  18 + @click="playerIdx = (i-1)">
20 19 <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{ i }}</div>
21 20 <player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
22 21 </div>
... ... @@ -60,12 +59,13 @@ export default {
60 59  
61 60 computed: {
62 61 liveStyle() {
63   - if (this.spilt == 1) {
64   - return {width: '100%', height: '100%'}
65   - } else if (this.spilt == 4) {
66   - return {width: '49%', height: '49%'}
67   - } else if (this.spilt == 9) {
68   - return {width: '32%', height: '32%'}
  62 + switch (this.spilt) {
  63 + case 4:
  64 + return {width: '49%', height: '49%'}
  65 + case 9:
  66 + return {width: '32%', height: '32%'}
  67 + default:
  68 + return {width: '100%', height: '100%'}
69 69 }
70 70 }
71 71 },
... ...