浏览代码

优化视频播放逻辑,新增URL变化时停止视频播放功能,提升用户体验

wuyi 3 月之前
父节点
当前提交
4923c97bdb
共有 2 个文件被更改,包括 21 次插入1 次删除
  1. 16 1
      src/components/VideoProcessor.vue
  2. 5 0
      src/views/VideoPlayer.vue

+ 16 - 1
src/components/VideoProcessor.vue

@@ -412,7 +412,12 @@ watch(
 
 watch(
   () => props.m3u8Url,
-  (newUrl) => {
+  (newUrl, oldUrl) => {
+    // 如果URL发生变化,先停止当前播放
+    if (oldUrl && newUrl !== oldUrl) {
+      stopVideo();
+    }
+
     if (newUrl) {
       processVideo(newUrl);
     }
@@ -438,10 +443,20 @@ const stopHlsLoading = (): void => {
   }
 };
 
+// 停止视频播放
+const stopVideo = (): void => {
+  if (videoElement.value) {
+    videoElement.value.pause();
+    videoElement.value.currentTime = 0;
+  }
+  stopHlsLoading();
+};
+
 // 暴露方法给父组件
 defineExpose({
   retry,
   stopHlsLoading,
+  stopVideo,
   processedCoverUrl: computed(() => processedCoverUrl.value),
   processedVideoUrl: computed(() => processedVideoUrl.value),
   loading: computed(() => loading.value),

+ 5 - 0
src/views/VideoPlayer.vue

@@ -1142,6 +1142,11 @@ watch(
   () => route.params.id,
   async (newId, oldId) => {
     if (newId && newId !== oldId) {
+      // 停止当前视频播放
+      if (videoProcessorRef.value) {
+        videoProcessorRef.value.stopVideo();
+      }
+
       // 重置购买状态
       isSinglePurchased.value = false;
       await loadVideoInfo();