Shikong/wvp-gb28181-project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
之前播放器窗口缩放时大小很奇怪，还有黑色底色
This commit is contained in:
648540858 2022-04-23 14:20:00 +08:00 committed by GitHub
commit 24057251e2
1 changed files with 272 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000" @dblclick="fullscreenSwich"> <div :id="containerId" :ref="containerId" @dblclick="fullscreenSwich">
<div class="buttons-box" id="buttonsBox"> <div class="buttons-box" id="buttonsBox">
<div class="buttons-box-left"> <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-play jessibuca-btn" @click="playBtnClick"></i>
@ -12,7 +12,8 @@
<span class="jessibuca-btn">{{ kBps }} kb/s</span> <span class="jessibuca-btn">{{ kBps }} kb/s</span>
<!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>--> <!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
<!-- <i class="iconfont icon-xiangqing2 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-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 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-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
<i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i> <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
@ -50,13 +51,10 @@ export default {
}; };
let paramUrl = decodeURIComponent(this.$route.params.url) let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() => { this.$nextTick(() => {
let dom = document.getElementById(this.containerId); this.updatePlayerDomSize()
if (dom.parentNode.clientHeight == 0) { window.onresize = () => {
dom.style.height = (9/16 ) * dom.clientWidth + "px" this.updatePlayerDomSize()
} }
dom.style.height = dom.parentNode.clientHeight + "px";
dom.style.width = dom.parentNode.clientWidth + "px";
if (typeof (this.videoUrl) == "undefined") { if (typeof (this.videoUrl) == "undefined") {
this.videoUrl = paramUrl; this.videoUrl = paramUrl;
} }
@ -72,6 +70,12 @@ export default {
immediate: true immediate: true
}, },
methods: { methods: {
updatePlayerDomSize() {
let dom = document.getElementById(this.containerId);
const width = dom.parentNode.clientWidth
dom.style.width = width + 'px';
dom.style.height = (9 / 16) * width + "px";
},
create() { create() {
let options = {}; let options = {};
console.log(this.$refs[this.containerId]) console.log(this.$refs[this.containerId])
@ -299,6 +303,7 @@ export default {
user-select: none; user-select: none;
z-index: 10; z-index: 10;
} }
.jessibuca-btn { .jessibuca-btn {
width: 20px; width: 20px;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
@ -309,6 +314,7 @@ export default {
text-align: center; text-align: center;
font-size: 0.8rem !important; font-size: 0.8rem !important;
} }
.buttons-box-right { .buttons-box-right {
position: absolute; position: absolute;
right: 0; right: 0;