aunix/wvp-GB28181-pro
1
0
Fork 0
mirror of https://gitee.com/pan648540858/wvp-GB28181-pro.git synced 2026-05-27 15:37:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

1.播放器显示问题

Browse Source 
2.多屏监控多窗口,窗口变化只有最后一个有时间监听问题
3.回放窗口播放时调整下大小
This commit is contained in:
shangxingyu 2024-02-03 11:42:41 +08:00
parent acdef18cba
commit addb6c0459
2 changed files with 47 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web_src/src/components/GBRecordDetail.vue
View File

@ -36,7 +36,6 @@
:error="videoError" :error="videoError"
:message="videoError" :message="videoError"
:hasAudio="hasAudio" :hasAudio="hasAudio"
style="max-height: 100%"
fluent autoplay live ></player> fluent autoplay live ></player>
</div> </div>
<div class="player-option-box"> <div class="player-option-box">
@ -137,8 +136,11 @@
margin: "10px auto 10px auto" margin: "10px auto 10px auto"
}, },
playerStyle: { playerStyle: {
"display": "flex",
"justify-content": "center",
"align-items": "center",
"margin": "0 auto 20px auto", "margin": "0 auto 20px auto",
"height": this.winHeight + "px", "height": this.winHeight + "px"
}, },
winHeight: window.innerHeight - 240, winHeight: window.innerHeight - 240,
playTime: null, playTime: null,
@ -178,17 +180,25 @@
}, },
mounted() { mounted() {
this.recordListStyle.height = this.winHeight + "px"; this.$nextTick(() => {
this.playerStyle["height"] = this.winHeight + "px"; this.updateWinHeight();
this.chooseDate = moment().format('YYYY-MM-DD') this.chooseDate = moment().format('YYYY-MM-DD')
this.dateChange(); this.dateChange();
window.addEventListener('beforeunload', this.stopPlayRecord) window.addEventListener('resize',this.updateWinHeight)
window.addEventListener('beforeunload', this.stopPlayRecord)
})
}, },
destroyed() { destroyed() {
this.$destroy('recordVideoPlayer'); this.$destroy('recordVideoPlayer');
window.removeEventListener('beforeunload', this.stopPlayRecord) window.removeEventListener('beforeunload', this.stopPlayRecord)
window.removeEventListener('resize',this.updateWinHeight)
}, },
methods: { methods: {
updateWinHeight(){
this.winHeight=window.innerHeight - 240;
this.recordListStyle.height = this.winHeight + "px";
this.playerStyle.height = this.winHeight + "px";
},
dateChange(){ dateChange(){
if (!this.chooseDate) { if (!this.chooseDate) {
return; return;

57
web_src/src/components/common/jessibuca.vue
View File

@ -1,23 +1,25 @@
<template> <template>
<div ref="container" @dblclick="fullscreenSwich" <div ref="container">
style="width:100%;height:518px; min-height: 200px;background-color: #000000;margin:0 auto;position: relative;"> <div ref="playerContainer" @dblclick="fullscreenSwich"
<div class="buttons-box" id="buttonsBox"> style="width:100%;height:100%;background-color: #000000;margin:0 auto;position: relative;">
<div class="buttons-box-left"> <div class="buttons-box" id="buttonsBox">
<i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> <div class="buttons-box-left">
<i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i> <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
<i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i> <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i>
<i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="mute()"></i> <i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i>
<i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="cancelMute()"></i> <i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="mute()"></i>
</div> <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="cancelMute()"></i>
<div class="buttons-box-right"> </div>
<span class="jessibuca-btn">{{ kBps }} kb/s</span> <div class="buttons-box-right">
<!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>--> <span class="jessibuca-btn">{{ kBps }} kb/s</span>
<!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>--> <!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
<i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="screenshot" <!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>-->
style="font-size: 1rem !important"></i> <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="screenshot"
<i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i> style="font-size: 1rem !important"></i>
<i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i> <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
<i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></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>
</div> </div>
</div> </div>
@ -46,13 +48,11 @@ export default {
}; };
}, },
props: ['videoUrl', 'error', 'hasAudio', 'height'], props: ['videoUrl', 'error', 'hasAudio', 'height'],
created() { mounted() {
let paramUrl = decodeURIComponent(this.$route.params.url) let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() => { this.$nextTick(() => {
this.updatePlayerDomSize() this.updatePlayerDomSize()
window.onresize = () => { window.addEventListener('resize',this.updatePlayerDomSize)
this.updatePlayerDomSize()
}
if (typeof (this.videoUrl) == "undefined") { if (typeof (this.videoUrl) == "undefined") {
this.videoUrl = paramUrl; this.videoUrl = paramUrl;
} }
@ -63,7 +63,10 @@ export default {
videoUrl: { videoUrl: {
handler(val, _) { handler(val, _) {
this.$nextTick(() => { this.$nextTick(() => {
this.play(val); if(val) {
this.play(val);
}
this.updatePlayerDomSize()
}) })
}, },
immediate: true immediate: true
@ -74,8 +77,7 @@ export default {
let dom = this.$refs.container; let dom = this.$refs.container;
let width = dom.parentNode.clientWidth let width = dom.parentNode.clientWidth
let height = (9 / 16) * width let height = (9 / 16) * width
const clientHeight = Math.min(dom.parentNode.clientHeight?dom.parentNode.clientHeight:document.body.clientHeight, document.documentElement.clientHeight)
const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
if (height > clientHeight) { if (height > clientHeight) {
height = clientHeight height = clientHeight
width = (16 / 9) * height width = (16 / 9) * height
@ -87,7 +89,7 @@ export default {
}, },
create() { create() {
let options = { let options = {
container: this.$refs.container, container: this.$refs.playerContainer,
autoWasm: true, autoWasm: true,
background: "", background: "",
controlAutoHide: false, controlAutoHide: false,
@ -257,6 +259,7 @@ export default {
this.playing = false; this.playing = false;
this.loaded = false; this.loaded = false;
this.performance = ""; this.performance = "";
window.removeEventListener('resize',this.updatePlayerDomSize);
}, },
} }
</script> </script>