From 8874c90db2c238fa4c55df491675fe7fec9d93b2 Mon Sep 17 00:00:00 2001 From: fine <54142345+criver31@users.noreply.github.com> Date: 星期二, 09 一月 2024 11:45:30 +0800 Subject: [PATCH] Merge branch '648540858:wvp-28181-2.0' into wvp-28181-2.0 --- web_src/src/components/common/jessibuca.vue | 198 ++++++++++++++++++++----------------------------- 1 files changed, 80 insertions(+), 118 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 a681729..c3d3e67 --- a/web_src/src/components/common/jessibuca.vue +++ b/web_src/src/components/common/jessibuca.vue @@ -1,5 +1,6 @@ <template> - <div ref="container" @dblclick="fullscreenSwich" style="width:100%;height:100%;background-color: #000000;margin:0 auto;"> + <div ref="container" @dblclick="fullscreenSwich" + style="width:100%;height:100%;min-height: 200px;background-color: #000000;margin:0 auto;position: relative;"> <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,10 +47,6 @@ }, props: ['videoUrl', 'error', 'hasAudio', 'height'], mounted() { - window.onerror = (msg) => { - // console.error(msg) - }; - console.log(this._uid) let paramUrl = decodeURIComponent(this.$route.params.url) this.$nextTick(() => { this.updatePlayerDomSize() @@ -60,15 +57,17 @@ this.videoUrl = paramUrl; } this.btnDom = document.getElementById("buttonsBox"); - console.log("鍒濆鍖栨椂鐨勫湴鍧�涓�: " + this.videoUrl) - this.play(this.videoUrl) }) }, watch: { - videoUrl(newData, oldData) { - this.play(newData) - }, - immediate: true + videoUrl: { + handler(val, _) { + this.$nextTick(() => { + this.play(val); + }) + }, + immediate: true + } }, methods: { updatePlayerDomSize() { @@ -81,55 +80,60 @@ height = 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"; + } }, create() { - let options = {}; - console.log("hasAudio " + this.hasAudio) - - jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign( - { - container: this.$refs.container, - videoBuffer: 0.2, // 鏈�澶х紦鍐叉椂闀匡紝鍗曚綅绉� - isResize: true, - decoder: "static/js/jessibuca/decoder.js", - useMSE: false, - showBandwidth: false, - isFlv: true, - // text: "WVP-PRO", - // background: "static/images/zlm-logo.png", - loadingText: "鍔犺浇涓�", - hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio, - debug: false, - supportDblclickFullscreen: false, // 鏄惁鏀寔灞忓箷鐨勫弻鍑讳簨浠讹紝瑙﹀彂鍏ㄥ睆锛屽彇娑堝叏灞忎簨浠躲�� - operateBtns: { - fullscreen: false, - screenshot: false, - play: false, - audio: false, - recorder: false, - }, - record: "record", - vod: this.vod, - forceNoOffscreen: this.forceNoOffscreen, - isNotMute: this.isNotMute, + 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; }); @@ -137,50 +141,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) { @@ -190,33 +155,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(); } @@ -230,7 +198,6 @@ jessibucaPlayer[this._uid].play(url); } else { jessibucaPlayer[this._uid].on("load", () => { - console.log("load 鎾斁") jessibucaPlayer[this._uid].play(url); }); } @@ -270,11 +237,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