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

动态计算播放器尺寸，保持16：9比例，避免出现黑框或固定大小无法缩放

Browse Source
This commit is contained in:
xiaoxie 2022-04-23 11:20:00 +08:00
parent f1c4647ac3
commit 5eac7642e9
1 changed files with 273 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
<template>
<div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000" @dblclick="fullscreenSwich">
<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>
@ -12,7 +13,8 @@
<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-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>
@ -50,13 +52,10 @@ export default {
};
let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() => {
let dom = document.getElementById(this.containerId);
if (dom.parentNode.clientHeight == 0) {
dom.style.height = (9/16 ) * dom.clientWidth + "px"
this.updatePlayerDomSize()
window.onresize = () => {
this.updatePlayerDomSize()
}
dom.style.height = dom.parentNode.clientHeight + "px";
dom.style.width = dom.parentNode.clientWidth + "px";
if (typeof (this.videoUrl) == "undefined") {
this.videoUrl = paramUrl;
}
@ -72,6 +71,12 @@ export default {
immediate: true
},
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() {
let options = {};
console.log(this.$refs[this.containerId])
@ -299,6 +304,7 @@ export default {
user-select: none;
z-index: 10;
}
.jessibuca-btn {
width: 20px;
color: rgb(255, 255, 255);
@ -309,6 +315,7 @@ export default {
text-align: center;
font-size: 0.8rem !important;
}
.buttons-box-right {
position: absolute;
right: 0;