From afa4e7baaefb69438052503b82fdfd55621cfc91 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 24 九月 2021 17:03:14 +0800
Subject: [PATCH] 完善wasm播放器,添加preload
---
src/components/wasmPlayer/wasm/player.js | 28 +++++++++
public/libs/wasmPlayer/libffmpeg.wasm | 0
public/libs/wasmPlayer/turbo.js | 11 +++
src/components/wasmPlayer/index.vue | 109 ++++++++++++++++++------------------
4 files changed, 93 insertions(+), 55 deletions(-)
diff --git a/public/libs/wasmPlayer/libffmpeg.wasm b/public/libs/wasmPlayer/libffmpeg.wasm
index 1c0cf0e..2624c05 100644
--- a/public/libs/wasmPlayer/libffmpeg.wasm
+++ b/public/libs/wasmPlayer/libffmpeg.wasm
Binary files differ
diff --git a/public/libs/wasmPlayer/turbo.js b/public/libs/wasmPlayer/turbo.js
index 443331f..e4ce4b4 100644
--- a/public/libs/wasmPlayer/turbo.js
+++ b/public/libs/wasmPlayer/turbo.js
@@ -67,14 +67,23 @@
})
}, 'vii')
+ Notify = Module.addFunction(function(Type, Value) {
+ //type 1:鎾斁澶辫触 2:鏂囦欢鎾斁鍒版湯灏�
+ //console.log(Type+" "+Value);
+ if (Type == 1) self.postMessage({ command: 'play_failed' })
+ else if (Type == 2) self.postMessage({ command: 'play_end' })
+ }, 'vii')
+
Module._Initialize(
DeliverVideo,
DeliverAudio,
GetFileLength,
ReadFile,
CreateVideo,
- CreateAudio
+ CreateAudio,
+ Notify
)
+
self.postMessage({ command: 'initialized' })
}
diff --git a/src/components/wasmPlayer/index.vue b/src/components/wasmPlayer/index.vue
index 447a4a5..2053aa8 100644
--- a/src/components/wasmPlayer/index.vue
+++ b/src/components/wasmPlayer/index.vue
@@ -9,16 +9,11 @@
></canvas>
<div class="container" id="videoPlayer">
<div class="canvasDiv">
- <div class="loadEffect" id="loading" style="display:none;">
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- </div>
+ <div
+ v-loading="videoLoading"
+ element-loading-background="rgba(0, 0, 0, 0.8)"
+ style="position: unset !important"
+ ></div>
<canvas
ref="playCanvas"
id="paly-canvas"
@@ -85,6 +80,13 @@
<span class="video-next" v-show="showNext">
<i class="el-icon-arrow-right" @click="playNext"></i>
</span>
+
+ <!-- 鎾斁澶辫触 -->
+ <span class="video-error" v-show="playerStatus == -1">
+ <i class="el-icon-warning-outline" style="font-size:40px"></i>
+ <br />
+ 瑙嗛鍔犺浇澶辫触 鏃犳晥鐨勮棰戝湴鍧�
+ </span>
</div>
</div>
</div>
@@ -136,6 +138,14 @@
type: Boolean,
default: true,
},
+ autoPlay: {
+ type: Boolean,
+ default: false,
+ },
+ preload: {
+ type: Boolean,
+ default: true,
+ },
},
computed: {
@@ -175,6 +185,8 @@
playerStatus: 0,
videoUrls: [],
playerIndex: 0,
+ isEmptyUrl: false,
+ videoLoading: false,
}
},
watch: {
@@ -192,11 +204,8 @@
},
mounted() {
this.player = new Player()
-
- // 褰曞儚URL澶勭悊, 鍙兘瀛樺湪澶氫釜褰曞儚鍦板潃
- if (!this.isStream) {
- this.videoUrls = this.videoUrl.split('||')
- }
+ this.player.preload = this.preload
+ this.player.statusCallback = this.setPlayerStatus
if (this.isStream) {
this.playVideo()
@@ -206,42 +215,24 @@
this.ctx.lineWidth = 1
this.initArea()
})
+ } else {
+ // 褰曞儚URL澶勭悊, 鍙兘瀛樺湪澶氫釜褰曞儚鍦板潃
+ if (this.videoUrl === '') {
+ this.playerStatus = -1
+ return
+ }
+
+ this.videoUrls = this.videoUrl.split('||')
+
+ if (this.autoPlay || this.preload) {
+ this.playVideo()
+ }
}
},
beforeDestroy() {
this.player.stop()
},
methods: {
- checkConnect(id) {
- if (id !== this.playerId) {
- return
- }
-
- if (this.wfs.websocketLoader && this.wfs.websocketLoader.client) {
- if (this.wfs.websocketLoader.client.disconnected) {
- this.playVideo()
- console.log('瀹炴椂瑙嗛宸叉柇寮�锛屾鍦ㄩ噸杩�')
- return
- }
- }
-
- let _this = this
- setTimeout(() => {
- _this.checkConnect(id)
- }, 10000)
- },
- getUuid() {
- var s = []
- var hexDigits = '0123456789abcdefghijkopqrst'
- for (var i = 0; i < 36; i++) {
- s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
- }
- s[14] = '4' //聽bits聽12-15聽of聽the聽time_hi_and_version聽field聽to聽0010
- s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) //聽bits聽6-7聽of聽the聽clock_seq_hi_and_reserved聽to聽01
- s[8] = s[13] = s[18] = s[23] = '-'
- var uuid = s.join('')
- return uuid
- },
// 鍥炴樉cavas鏁版嵁
// 鐐瑰嚮閫変腑鍙樿壊 灏嗗綋鍓嶉〉闈㈡墍鏈夎矾寰勯噸缁樺垽鏂綋鍓嶉紶鏍囩殑鍧愭爣鍦ㄥ摢涓浘褰㈠唴 濡傛灉涓嶄紶鍧愭爣鍙傛暟灏辨槸鍥炴樉鐨勬柟娉�
clickSelect(e) {
@@ -451,10 +442,7 @@
url = '/httpImage/' + this.videoUrls[this.playerIndex]
}
- if (url == '') {
- return
- }
-
+ this.videoLoading = true
if (this.player.hPlayer == 0) {
this.player.play(
url,
@@ -462,19 +450,25 @@
this.isStream,
this.$refs.timeTrack,
this.$refs.timeLabel,
- payload
+ payload,
+ () => {
+ this.videoLoading = false
+ }
)
} else if (this.player.PlayOrPause == 0) {
this.player.resume()
+ this.videoLoading = false
} else {
this.player.pause()
+ this.videoLoading = false
}
this.playerStatus = this.player.PlayOrPause
- let randomId = this.getUuid()
- this.checkConnect(randomId)
},
-
+ setPlayerStatus(stat) {
+ this.videoLoading = false
+ this.playerStatus = stat
+ },
stopVideo() {
if (this.player.hPlayer == 0) return
@@ -495,7 +489,6 @@
this.playerIndex++
this.player.stop()
this.playVideo()
- console.log(this.playerIndex, this.videoUrls.length)
},
},
}
@@ -737,4 +730,12 @@
.video-next {
right: 0px;
}
+
+.video-error {
+ position: absolute;
+ top: 35%;
+ left: 30%;
+ font-size: 14px;
+ color: #fff;
+}
</style>
diff --git a/src/components/wasmPlayer/wasm/player.js b/src/components/wasmPlayer/wasm/player.js
index eff828d..a02ccde 100644
--- a/src/components/wasmPlayer/wasm/player.js
+++ b/src/components/wasmPlayer/wasm/player.js
@@ -16,6 +16,12 @@
this.webglPlayer = null
this.trackTimer = null
+ this.loop = false
+ this.preload = true
+ this.preloadFlag = 0
+ this.statusCallback = (stat) => {
+ console.log(stat)
+ }
}
Player.prototype.play = function(
@@ -69,6 +75,8 @@
)
}
This.startTrackTimer()
+
+ This.statusCallback(0)
break
}
case 'create_audio': {
@@ -79,9 +87,17 @@
sampleRate: This.AudioParam.sample_rate,
flushingTime: 5000,
})
+
+ This.statusCallback(1)
break
}
case 'deliver_video': {
+ if (!This.isStream && This.preload && This.preloadFlag == 0) {
+ This.preloadFlag = 1
+ This.pause()
+ This.statusCallback(0)
+ }
+
//sample:{time_stamp:xxx,data:xxx}
This.CurPos = evt.data.sample.time_stamp
This.webglPlayer.renderFrame(
@@ -96,6 +112,18 @@
This.pcmPlayer.play(evt.data.sample.buf)
break
}
+ case 'play_failed': {
+ This.statusCallback(-1)
+ This.stop()
+ break
+ }
+ case 'play_end': {
+ if (This.loop) {
+ This.seek(0)
+ }
+ break
+ }
+
default:
return
}
--
Gitblit v1.8.0