From 9f16b5c553b479ea12fe368a7ecc748872ea8b98 Mon Sep 17 00:00:00 2001 From: zxl <763096477@qq.com> Date: 星期四, 12 六月 2025 11:11:27 +0800 Subject: [PATCH] 修改配置文件 --- web_src/src/components/common/jessibuca.vue | 246 ++++++++++++++++++++----------------------------- 1 files changed, 101 insertions(+), 145 deletions(-) diff --git a/web_src/src/components/common/jessibuca.vue b/web_src/src/components/common/jessibuca.vue old mode 100644 new mode 100755 index 7715076..4ea732c --- a/web_src/src/components/common/jessibuca.vue +++ b/web_src/src/components/common/jessibuca.vue @@ -1,6 +1,7 @@ <template> <div ref="container" @dblclick="fullscreenSwich" - style="width:100%;height:100%;background-color: #000000;margin:0 auto;"> + style="width:100%; height: 100%; background-color: #000000;margin:0 auto;position: relative;"> + <div style="width:100%; padding-top: 56.25%; position: relative;"></div> <div class="buttons-box" id="buttonsBox"> <div class="buttons-box-left"> <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> @@ -46,111 +47,108 @@ }; }, props: ['videoUrl', 'error', 'hasAudio', 'height'], - mounted() { - window.onerror = (msg) => { - // console.error(msg) - }; - console.log(this._uid) + created() { let paramUrl = decodeURIComponent(this.$route.params.url) this.$nextTick(() => { + console.log(2222) this.updatePlayerDomSize() - window.onresize = () => { - this.updatePlayerDomSize() - } + window.onresize = this.updatePlayerDomSize if (typeof (this.videoUrl) == "undefined") { this.videoUrl = paramUrl; } this.btnDom = document.getElementById("buttonsBox"); - console.log("鍒濆鍖栨椂鐨勫湴鍧�涓�: " + this.videoUrl) - this.play(this.videoUrl) }) }, + // mounted() { + // const ro = new ResizeObserver(entries => { + // entries.forEach(entry => { + // this.updatePlayerDomSize() + // }); + // }); + // ro.observe(this.$refs.container); + // }, + mounted(){ + this.updatePlayerDomSize(); + }, watch: { - videoUrl(newData, oldData) { - this.play(newData) - }, - immediate: true + videoUrl: { + handler(val, _) { + this.$nextTick(() => { + this.play(val); + }) + }, + immediate: true + } }, methods: { updatePlayerDomSize() { let dom = this.$refs.container; let width = dom.parentNode.clientWidth let height = (9 / 16) * width + console.log(height) - const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight) - if (height > clientHeight) { - height = clientHeight + console.log(dom.clientHeight) + if (height > dom.clientHeight) { + height = dom.clientHeight width = (16 / 9) * height } - - dom.style.width = width + 'px'; - dom.style.height = height + "px"; + if (width > 0 && height > 0) { + dom.style.width = width + 'px'; + dom.style.height = height + "px"; + dom.style.paddingTop = 0; + console.log(width) + console.log(height) + } }, create() { - let options = {}; - console.log("hasAudio " + this.hasAudio) - - jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign( - { - container: this.$refs.container, - autoWasm: true, - background: "", - controlAutoHide: false, - debug: false, - decoder: "static/js/jessibuca/decoder.js", - forceNoOffscreen: true, - hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio, - hasVideo: true, - heartTimeout: 5, - heartTimeoutReplay: true, - heartTimeoutReplayTimes: 3, - hiddenAutoPause: false, - hotKey: false, - isFlv: false, - isFullResize: false, - isNotMute: this.isNotMute, - isResize: false, - keepScreenOn: false, - loadingText: "璇风◢绛�, 瑙嗛鍔犺浇涓�......", - loadingTimeout: 10, - loadingTimeoutReplay: true, - loadingTimeoutReplayTimes: 3, - openWebglAlignment: false, - operateBtns: { - fullscreen: false, - screenshot: false, - play: false, - audio: false, - record: false - }, - recordType: "webm", - rotate: 0, - showBandwidth: false, - supportDblclickFullscreen: false, - timeout: 10, - useMSE: location.hostname !== "localhost" && location.protocol !== "https:", - useOffscreen: false, - useWCS: location.hostname === "localhost" || location.protocol === "https", - useWebFullScreen: false, - videoBuffer: 0, - wasmDecodeAudioSyncVideo: true, - wasmDecodeErrorReplay: true, - wcsUseVideoRender: true + let options = { + container: this.$refs.container, + autoWasm: true, + background: "", + controlAutoHide: false, + debug: false, + decoder: "static/js/jessibuca/decoder.js", + forceNoOffscreen: false, + hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio, + heartTimeout: 5, + heartTimeoutReplay: true, + heartTimeoutReplayTimes: 3, + hiddenAutoPause: false, + hotKey: true, + isFlv: false, + isFullResize: false, + isNotMute: this.isNotMute, + isResize: false, + keepScreenOn: true, + loadingText: "璇风◢绛�, 瑙嗛鍔犺浇涓�......", + loadingTimeout: 10, + loadingTimeoutReplay: true, + loadingTimeoutReplayTimes: 3, + openWebglAlignment: false, + operateBtns: { + fullscreen: false, + screenshot: false, + play: false, + audio: false, + record: false }, - options - )); + recordType: "mp4", + rotate: 0, + showBandwidth: false, + supportDblclickFullscreen: false, + timeout: 10, + useMSE: true, + useWCS: location.hostname === "localhost" || location.protocol === "https:", + useWebFullScreen: true, + videoBuffer: 0.1, + wasmDecodeErrorReplay: true, + wcsUseVideoRender: true + }; + console.log("Jessibuca -> options: ", options); + jessibucaPlayer[this._uid] = new window.Jessibuca({...options}); + let jessibuca = jessibucaPlayer[this._uid]; let _this = this; - jessibuca.on("load", function () { - console.log("on load init"); - }); - - jessibuca.on("log", function (msg) { - console.log("on log", msg); - }); - jessibuca.on("record", function (msg) { - console.log("on record:", msg); - }); jessibuca.on("pause", function () { _this.playing = false; }); @@ -158,50 +156,11 @@ _this.playing = true; }); jessibuca.on("fullscreen", function (msg) { - console.log("on fullscreen", msg); _this.fullscreen = msg }); - jessibuca.on("mute", function (msg) { - console.log("on mute", msg); _this.isNotMute = !msg; }); - jessibuca.on("audioInfo", function (msg) { - // console.log("audioInfo", msg); - }); - - jessibuca.on("videoInfo", function (msg) { - // this.videoInfo = msg; - console.log("videoInfo", msg); - - }); - - jessibuca.on("bps", function (bps) { - // console.log('bps', bps); - - }); - let _ts = 0; - jessibuca.on("timeUpdate", function (ts) { - // console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts); - _ts = ts; - }); - - jessibuca.on("videoInfo", function (info) { - console.log("videoInfo", info); - }); - - jessibuca.on("error", function (error) { - console.log("error", error); - }); - - jessibuca.on("timeout", function () { - console.log("timeout"); - }); - - jessibuca.on('start', function () { - console.log('start'); - }) - jessibuca.on("performance", function (performance) { let show = "鍗¢】"; if (performance === 2) { @@ -211,33 +170,36 @@ } _this.performance = show; }); - jessibuca.on('buffer', function (buffer) { - // console.log('buffer', buffer); - }) - - jessibuca.on('stats', function (stats) { - // console.log('stats', stats); - }) - jessibuca.on('kBps', function (kBps) { _this.kBps = Math.round(kBps); }); - - // 鏄剧ず鏃堕棿鎴� PTS - jessibuca.on('videoFrame', function () { - - }) - - // - jessibuca.on('metadata', function () { - + jessibuca.on("videoInfo", function (msg) { + console.log("Jessibuca -> videoInfo: ", msg); + }); + jessibuca.on("audioInfo", function (msg) { + console.log("Jessibuca -> audioInfo: ", msg); + }); + jessibuca.on("error", function (msg) { + console.log("Jessibuca -> error: ", msg); + }); + jessibuca.on("timeout", function (msg) { + console.log("Jessibuca -> timeout: ", msg); + }); + jessibuca.on("loadingTimeout", function (msg) { + console.log("Jessibuca -> timeout: ", msg); + }); + jessibuca.on("delayTimeout", function (msg) { + console.log("Jessibuca -> timeout: ", msg); + }); + jessibuca.on("playToRenderTimes", function (msg) { + console.log("Jessibuca -> playToRenderTimes: ", msg); }); }, playBtnClick: function (event) { this.play(this.videoUrl) }, play: function (url) { - console.log(url) + console.log("Jessibuca -> url: ", url); if (jessibucaPlayer[this._uid]) { this.destroy(); } @@ -251,7 +213,6 @@ jessibucaPlayer[this._uid].play(url); } else { jessibucaPlayer[this._uid].on("load", () => { - console.log("load 鎾斁") jessibucaPlayer[this._uid].play(url); }); } @@ -291,11 +252,6 @@ this.err = ""; this.performance = ""; - }, - eventcallbacK: function (type, message) { - // console.log("player 浜嬩欢鍥炶皟") - // console.log(type) - // console.log(message) }, fullscreenSwich: function () { let isFull = this.isFullscreen() -- Gitblit v1.8.0