From fb843d41c1e186b2109bfeea73509cad2b135cdc Mon Sep 17 00:00:00 2001
From: xiaoxie <hotcoffie@163.com>
Date: 星期四, 21 四月 2022 12:33:10 +0800
Subject: [PATCH] 1.重构全局页面结构，从之前每个页面独立绘制改为路由嵌套 2.全局页面样式优化，如滚动条、标题栏等
---
web_src/src/components/dialog/jessibuca.vue | 84 ++++++++++++++++++++++++++----------------
1 files changed, 52 insertions(+), 32 deletions(-)
diff --git a/web_src/src/components/dialog/jessibuca.vue b/web_src/src/components/dialog/jessibuca.vue
index ff91cd1..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-crop2 jessibuca-btn" @click="jessibuca.screenshot('鎴浘','png',0.5)"></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,18 +74,22 @@
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,
- videoBuffer: 0.5, // 鏈�澶х紦鍐叉椂闀匡紝鍗曚綅绉�
+ container: this.$refs[this.containerId],
+ videoBuffer: 0.2, // 鏈�澶х紦鍐叉椂闀匡紝鍗曚綅绉�
isResize: true,
- decoder: "./static/js/jessibuca/index.js",
+ decoder:"static/js/jessibuca/decoder.js",
+ useMSE: false,
+ showBandwidth: false,
+ isFlv: true,
// text: "WVP-PRO",
- // background: "bg.jpg",
+ // background: "static/images/zlm-logo.png",
loadingText: "鍔犺浇涓�",
- hasAudio: this.hasAudio,
+ hasAudio: typeof (this.hasAudio) =="undefined"? true: this.hasAudio,
debug: false,
supportDblclickFullscreen: false, // 鏄惁鏀寔灞忓箷鐨勫弻鍑讳簨浠讹紝瑙﹀彂鍏ㄥ睆锛屽彇娑堝叏灞忎簨浠躲��
operateBtns: {
@@ -91,6 +97,7 @@
screenshot: false,
play: false,
audio: false,
+ recorder: false,
},
record: "record",
vod: this.vod,
@@ -131,8 +138,8 @@
});
this.jessibuca.on("videoInfo", function (msg) {
- this.videoInfo = msg;
- // console.log("videoInfo", msg);
+ // this.videoInfo = msg;
+ console.log("videoInfo", msg);
});
@@ -193,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)
},
--
Gitblit v1.8.0