From 6212ad6fd11f8ea5cf28879352529b6eb2401770 Mon Sep 17 00:00:00 2001 From: james58899 Date: Mon, 17 Feb 2025 09:14:56 +0000 Subject: [PATCH 1/5] Try recover video error --- src/components/centerBlock/OverlayPlayer.vue | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/centerBlock/OverlayPlayer.vue b/src/components/centerBlock/OverlayPlayer.vue index 33aa03a..adfa89b 100644 --- a/src/components/centerBlock/OverlayPlayer.vue +++ b/src/components/centerBlock/OverlayPlayer.vue @@ -170,6 +170,17 @@ const toggleFullscreen = () => { const setBufferAndErrorState = (buffering, error) => { isBuffering.value = buffering isVideoError.value = error + + // Try recover video + if (error) { + videoRef.value.pause() + const time = videoRef.value.currentTime + videoRef.value.load() + videoRef.value.currentTime = time + videoRef.value.play() + .then(() => isVideoError.value = false).catch((err) => console.error(err)) + .then(() => updatePlayerStatus()) + } } // Handle video volume From a6cc157769cb117ee106355faaa37494e5e06ab4 Mon Sep 17 00:00:00 2001 From: jimchen5209 Date: Sun, 23 Feb 2025 16:46:50 +0800 Subject: [PATCH 2/5] refactor: move video error and playback handling --- src/components/centerBlock/OverlayPlayer.vue | 41 +++++++++++--------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/src/components/centerBlock/OverlayPlayer.vue b/src/components/centerBlock/OverlayPlayer.vue index adfa89b..5baa227 100644 --- a/src/components/centerBlock/OverlayPlayer.vue +++ b/src/components/centerBlock/OverlayPlayer.vue @@ -102,6 +102,27 @@ const handlePlayerLoaded = () => { } } +const handlePlayerPlay = () => { + isBuffering.value = false + isVideoError.value = false +} + +const handlePlayerError = (event) => { + isBuffering.value = false + isVideoError.value = true + + // Try recover video + if (event.type === 'error') { + videoRef.value.pause() + const time = videoRef.value.currentTime + videoRef.value.load() + videoRef.value.currentTime = time + videoRef.value.play() + .then(() => isVideoError.value = false).catch((err) => console.error(err)) + .then(() => updatePlayerStatus()) + } +} + const playbackRateList = ref([ { value: 0.25, text: '0.25x' }, { value: 0.5, text: '0.5x' }, @@ -167,22 +188,6 @@ const toggleFullscreen = () => { } } -const setBufferAndErrorState = (buffering, error) => { - isBuffering.value = buffering - isVideoError.value = error - - // Try recover video - if (error) { - videoRef.value.pause() - const time = videoRef.value.currentTime - videoRef.value.load() - videoRef.value.currentTime = time - videoRef.value.play() - .then(() => isVideoError.value = false).catch((err) => console.error(err)) - .then(() => updatePlayerStatus()) - } -} - // Handle video volume const videoAmplifier = computed(() => { if (!videoRef.value) return null @@ -518,8 +523,8 @@ onUnmounted(() => { @loadstart="isBuffering = true" @loadeddata="handlePlayerLoaded" @waiting="isBuffering = true" - @playing="setBufferAndErrorState(false, false)" - @error="setBufferAndErrorState(false, true)" + @playing="handlePlayerPlay" + @error="handlePlayerError" class="has-full-size" :src="resource?.isLive ? undefined : resource?.src" /> From 1f4689944d79d404ee2204c8b7c10a29a00f0363 Mon Sep 17 00:00:00 2001 From: jimchen5209 Date: Sun, 23 Feb 2025 16:47:13 +0800 Subject: [PATCH 3/5] fix: recover MEDIA_ERR_DECODE error only --- src/components/centerBlock/OverlayPlayer.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/centerBlock/OverlayPlayer.vue b/src/components/centerBlock/OverlayPlayer.vue index 5baa227..ba60c24 100644 --- a/src/components/centerBlock/OverlayPlayer.vue +++ b/src/components/centerBlock/OverlayPlayer.vue @@ -112,14 +112,15 @@ const handlePlayerError = (event) => { isVideoError.value = true // Try recover video - if (event.type === 'error') { + // MEDIA_ERR_DECODE + if (event.target.error.code === 3) { + console.error(`Video error: ${event.target.error.code} (${event.target.error.message})`) + videoRef.value.pause() const time = videoRef.value.currentTime videoRef.value.load() videoRef.value.currentTime = time videoRef.value.play() - .then(() => isVideoError.value = false).catch((err) => console.error(err)) - .then(() => updatePlayerStatus()) } } From c0cbf48ae1c1809a74461be9aa037c3c2d6c9e2d Mon Sep 17 00:00:00 2001 From: jimchen5209 Date: Sun, 23 Feb 2025 17:12:17 +0800 Subject: [PATCH 4/5] refactor: rename handlePlayerPlay to handlePlayerPlaying --- src/components/centerBlock/OverlayPlayer.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/centerBlock/OverlayPlayer.vue b/src/components/centerBlock/OverlayPlayer.vue index ba60c24..8376e0c 100644 --- a/src/components/centerBlock/OverlayPlayer.vue +++ b/src/components/centerBlock/OverlayPlayer.vue @@ -102,7 +102,7 @@ const handlePlayerLoaded = () => { } } -const handlePlayerPlay = () => { +const handlePlayerPlaying = () => { isBuffering.value = false isVideoError.value = false } @@ -524,7 +524,7 @@ onUnmounted(() => { @loadstart="isBuffering = true" @loadeddata="handlePlayerLoaded" @waiting="isBuffering = true" - @playing="handlePlayerPlay" + @playing="handlePlayerPlaying" @error="handlePlayerError" class="has-full-size" :src="resource?.isLive ? undefined : resource?.src" From 42d19e019d7aca93d06cecb0d48290e7d4c5c76a Mon Sep 17 00:00:00 2001 From: jimchen5209 Date: Sun, 23 Feb 2025 17:14:42 +0800 Subject: [PATCH 5/5] refactor: move error message --- src/components/centerBlock/OverlayPlayer.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/centerBlock/OverlayPlayer.vue b/src/components/centerBlock/OverlayPlayer.vue index 8376e0c..e46691b 100644 --- a/src/components/centerBlock/OverlayPlayer.vue +++ b/src/components/centerBlock/OverlayPlayer.vue @@ -108,14 +108,13 @@ const handlePlayerPlaying = () => { } const handlePlayerError = (event) => { + console.error(`Video error: ${event.target.error.code} (${event.target.error.message})`) isBuffering.value = false isVideoError.value = true // Try recover video // MEDIA_ERR_DECODE if (event.target.error.code === 3) { - console.error(`Video error: ${event.target.error.code} (${event.target.error.message})`) - videoRef.value.pause() const time = videoRef.value.currentTime videoRef.value.load()