| | |
| | | <template> |
| | | <div ref="container" @dblclick="fullscreenSwich" |
| | | style="width:100%;height:100%;background-color: #000000;margin:0 auto;position: relative;"> |
| | | style="width:100%; height: 100%; background-color: #000000;margin:0 auto;position: relative;"> |
| | | <div style="width:100%; padding-top: 56.25%; position: relative;"></div> |
| | | <div class="buttons-box" id="buttonsBox"> |
| | | <div class="buttons-box-left"> |
| | | <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> |
| | |
| | | }; |
| | | }, |
| | | props: ['videoUrl', 'error', 'hasAudio', 'height'], |
| | | mounted() { |
| | | created() { |
| | | let paramUrl = decodeURIComponent(this.$route.params.url) |
| | | this.$nextTick(() => { |
| | | console.log(2222) |
| | | this.updatePlayerDomSize() |
| | | window.onresize = () => { |
| | | this.updatePlayerDomSize() |
| | | } |
| | | window.onresize = this.updatePlayerDomSize |
| | | if (typeof (this.videoUrl) == "undefined") { |
| | | this.videoUrl = paramUrl; |
| | | } |
| | | this.btnDom = document.getElementById("buttonsBox"); |
| | | }) |
| | | }, |
| | | // mounted() { |
| | | // const ro = new ResizeObserver(entries => { |
| | | // entries.forEach(entry => { |
| | | // this.updatePlayerDomSize() |
| | | // }); |
| | | // }); |
| | | // ro.observe(this.$refs.container); |
| | | // }, |
| | | mounted(){ |
| | | this.updatePlayerDomSize(); |
| | | }, |
| | | watch: { |
| | | videoUrl: { |
| | |
| | | let dom = this.$refs.container; |
| | | let width = dom.parentNode.clientWidth |
| | | let height = (9 / 16) * width |
| | | console.log(height) |
| | | |
| | | const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight) |
| | | if (height > clientHeight) { |
| | | height = clientHeight |
| | | console.log(dom.clientHeight) |
| | | if (height > dom.clientHeight) { |
| | | height = dom.clientHeight |
| | | width = (16 / 9) * height |
| | | } |
| | | |
| | | dom.style.width = width + 'px'; |
| | | dom.style.height = height + "px"; |
| | | if (width > 0 && height > 0) { |
| | | dom.style.width = width + 'px'; |
| | | dom.style.height = height + "px"; |
| | | dom.style.paddingTop = 0; |
| | | console.log(width) |
| | | console.log(height) |
| | | } |
| | | }, |
| | | create() { |
| | | let options = { |