From 3eef73ecb6e8fa36466cd8921a6129c886911138 Mon Sep 17 00:00:00 2001 From: 648540858 <456panlinlin> Date: 星期六, 02 四月 2022 18:19:12 +0800 Subject: [PATCH] 修复实时监控无法播放问题 #427 --- web_src/src/components/dialog/devicePlayer.vue | 4 + web_src/src/components/dialog/jessibuca.vue | 67 ++++++++++++++++++++------------- web_src/src/components/live.vue | 2 3 files changed, 45 insertions(+), 28 deletions(-) diff --git a/web_src/src/components/dialog/devicePlayer.vue b/web_src/src/components/dialog/devicePlayer.vue index effd389..2eb3acb 100644 --- a/web_src/src/components/dialog/devicePlayer.vue +++ b/web_src/src/components/dialog/devicePlayer.vue @@ -3,7 +3,9 @@ <el-dialog title="瑙嗛鎾斁" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()"> <!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> --> - <player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" :height="false" :hasAudio="hasAudio" fluent autoplay live ></player> + <div style="width: 100%; height: 100%"> + <player containerId="container" ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></player> + </div> <div id="shared" style="text-align: right; margin-top: 1rem;"> <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick"> <el-tab-pane label="瀹炴椂瑙嗛" name="media"> diff --git a/web_src/src/components/dialog/jessibuca.vue b/web_src/src/components/dialog/jessibuca.vue index e719c2b..339d3a2 100644 --- a/web_src/src/components/dialog/jessibuca.vue +++ b/web_src/src/components/dialog/jessibuca.vue @@ -1,25 +1,22 @@ <template> - <div id="jessibuca" style="width: auto; height: auto"> - <div id="container" ref="container" style="width: 100%; height: 10rem; background-color: #000" @dblclick="fullscreenSwich"> - <div class="buttons-box" id="buttonsBox"> - <div class="buttons-box-left"> - <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> - <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i> - <i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i> - <i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="jessibuca.mute()"></i> - <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i> - </div> - <div class="buttons-box-right"> - <span class="jessibuca-btn">{{kBps}} kb/s</span> -<!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>--> -<!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>--> - <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('鎴浘','png',0.5)" style="font-size: 1rem !important"></i> - <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i> - <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i> - <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i> - </div> - </div> - + <div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000" @dblclick="fullscreenSwich"> + <div class="buttons-box" id="buttonsBox"> + <div class="buttons-box-left"> + <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> + <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i> + <i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i> + <i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="jessibuca.mute()"></i> + <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i> + </div> + <div class="buttons-box-right"> + <span class="jessibuca-btn">{{kBps}} kb/s</span> + <!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>--> + <!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>--> + <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('鎴浘','png',0.5)" style="font-size: 1rem !important"></i> + <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i> + <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i> + <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i> + </div> </div> </div> </template> @@ -46,15 +43,20 @@ forceNoOffscreen: false, }; }, - props: ['videoUrl', 'error', 'hasAudio', 'height'], + props: ['containerId','videoUrl', 'error', 'hasAudio', 'height'], mounted () { window.onerror = (msg) => { // console.error(msg) }; let paramUrl = decodeURIComponent(this.$route.params.url) this.$nextTick(() =>{ - let dom = document.getElementById("container"); - dom.style.height = (9/16 ) * dom.clientWidth + "px" + 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"; + if (typeof (this.videoUrl) == "undefined") { this.videoUrl = paramUrl; } @@ -72,12 +74,12 @@ methods: { create(){ let options = {}; - console.log(this.$refs.container) + console.log(this.$refs[this.containerId]) console.log("hasAudio " + this.hasAudio) this.jessibuca = new window.Jessibuca(Object.assign( { - container: this.$refs.container, + container: this.$refs[this.containerId], videoBuffer: 0.2, // 鏈�澶х紦鍐叉椂闀匡紝鍗曚綅绉� isResize: true, decoder:"static/js/jessibuca/decoder.js", @@ -198,6 +200,19 @@ }); }, + 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) }, diff --git a/web_src/src/components/live.vue b/web_src/src/components/live.vue index 3c91058..8257527 100644 --- a/web_src/src/components/live.vue +++ b/web_src/src/components/live.vue @@ -33,7 +33,7 @@ > <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div> <player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true" - :idx="'player'+i" @screenshot="shot" @destroy="destroy"></player> + :containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player> <!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]" :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> --> </div> </div> -- Gitblit v1.8.0