Commit 010e73b0c7e4454fe1e354460c0de69b347d7361
1 parent
ad4e61d7
修复弹窗播放和分屏播放窗口尺寸异常的BUG
Showing
2 changed files
with
18 additions
and
8 deletions
web_src/src/components/common/jessibuca.vue
| 1 | 1 | <template> |
| 2 | 2 | <div ref="container" @dblclick="fullscreenSwich" |
| 3 | - style="width:100%;height:518px; min-height: 200px;background-color: #000000;margin:0 auto;position: relative;"> | |
| 3 | + style="width:100%; height: 100%; background-color: #000000;margin:0 auto;position: relative;"> | |
| 4 | 4 | <div class="buttons-box" id="buttonsBox"> |
| 5 | 5 | <div class="buttons-box-left"> |
| 6 | 6 | <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> |
| ... | ... | @@ -49,16 +49,23 @@ export default { |
| 49 | 49 | created() { |
| 50 | 50 | let paramUrl = decodeURIComponent(this.$route.params.url) |
| 51 | 51 | this.$nextTick(() => { |
| 52 | + console.log(2222) | |
| 52 | 53 | this.updatePlayerDomSize() |
| 53 | - window.onresize = () => { | |
| 54 | - this.updatePlayerDomSize() | |
| 55 | - } | |
| 54 | + window.onresize = this.updatePlayerDomSize | |
| 56 | 55 | if (typeof (this.videoUrl) == "undefined") { |
| 57 | 56 | this.videoUrl = paramUrl; |
| 58 | 57 | } |
| 59 | 58 | this.btnDom = document.getElementById("buttonsBox"); |
| 60 | 59 | }) |
| 61 | 60 | }, |
| 61 | + // mounted() { | |
| 62 | + // const ro = new ResizeObserver(entries => { | |
| 63 | + // entries.forEach(entry => { | |
| 64 | + // this.updatePlayerDomSize() | |
| 65 | + // }); | |
| 66 | + // }); | |
| 67 | + // ro.observe(this.$refs.container); | |
| 68 | + // }, | |
| 62 | 69 | watch: { |
| 63 | 70 | videoUrl: { |
| 64 | 71 | handler(val, _) { |
| ... | ... | @@ -74,15 +81,18 @@ export default { |
| 74 | 81 | let dom = this.$refs.container; |
| 75 | 82 | let width = dom.parentNode.clientWidth |
| 76 | 83 | let height = (9 / 16) * width |
| 84 | + console.log(height) | |
| 77 | 85 | |
| 78 | - const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight) | |
| 79 | - if (height > clientHeight) { | |
| 80 | - height = clientHeight | |
| 86 | + console.log(dom.clientHeight) | |
| 87 | + if (height > dom.clientHeight) { | |
| 88 | + height = dom.clientHeight | |
| 81 | 89 | width = (16 / 9) * height |
| 82 | 90 | } |
| 83 | 91 | if (width > 0 && height > 0) { |
| 84 | 92 | dom.style.width = width + 'px'; |
| 85 | 93 | dom.style.height = height + "px"; |
| 94 | + console.log(width) | |
| 95 | + console.log(height) | |
| 86 | 96 | } |
| 87 | 97 | }, |
| 88 | 98 | create() { | ... | ... |
web_src/src/components/dialog/devicePlayer.vue
| ... | ... | @@ -7,7 +7,7 @@ |
| 7 | 7 | v-if="Object.keys(this.player).length > 1"> |
| 8 | 8 | <el-tab-pane label="Jessibuca" name="jessibuca"> |
| 9 | 9 | <jessibucaPlayer v-if="activePlayer === 'jessibuca'" ref="jessibuca" :visible.sync="showVideoDialog" |
| 10 | - :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" | |
| 10 | + :videoUrl="videoUrl" :error="videoError" :message="videoError" style="height: 515px" | |
| 11 | 11 | :hasAudio="hasAudio" fluent autoplay live></jessibucaPlayer> |
| 12 | 12 | </el-tab-pane> |
| 13 | 13 | <el-tab-pane label="WebRTC" name="webRTC"> | ... | ... |