From 8b06ffcaad203a6ed687f2717d75d03114b70c9f Mon Sep 17 00:00:00 2001
From: Rogee <rogeecn@qq.com>
Date: Fri, 9 May 2025 20:30:22 +0800
Subject: [PATCH] feat: update player

---
 backend/frpc.toml                           |  2 +-
 frontend/wechat/src/views/ArticleDetail.vue | 82 ++++++++++-----------
 2 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/backend/frpc.toml b/backend/frpc.toml
index 522abf9..46f7384 100644
--- a/backend/frpc.toml
+++ b/backend/frpc.toml
@@ -6,5 +6,5 @@ name = "test-http"
 type = "tcp"
 localIP = "127.0.0.1"
 #localPort = 8088
-localPort = 8088
+localPort = 4173
 remotePort = 1423
diff --git a/frontend/wechat/src/views/ArticleDetail.vue b/frontend/wechat/src/views/ArticleDetail.vue
index 4babe41..3293bbb 100644
--- a/frontend/wechat/src/views/ArticleDetail.vue
+++ b/frontend/wechat/src/views/ArticleDetail.vue
@@ -1,6 +1,5 @@
 <script setup>
 import Player, { Events, I18N } from 'xgplayer';
-import Mp4Plugin from "xgplayer-mp4";
 import 'xgplayer/dist/index.min.css';
 import ZH from 'xgplayer/es/lang/zh-cn';
 import MobilePreset from 'xgplayer/es/presets/mobile';
@@ -27,42 +26,34 @@ const mediaLoaded = ref(false);
 I18N.use(ZH)
 
 
-const initializePlayer = async () => {
-    try {
-        const { data } = await postApi.play(route.params.id);
-        if (!data.url) {
-            alert("视频地址不存在");
-            return;
-        }
 
+const initializePlayer = async () => {
+    if (player.value) {
+        return
+    }
+    const { data } = await postApi.play(route.params.id);
+    if (!data.url) {
+        alert("视频地址不存在");
+        return;
+    }
+
+    try {
         player.value = new Player({
             id: 'player',
             url: data.url,
             width: '100%',
-            fitVideoSize: 'fixWidth',
+            fitVideoSize: 'auto',
+            videoFillMode: 'fillWidth',
             fluid: true,
-            plugins: [Mp4Plugin],
             presets: [MobilePreset],
             playsinline: true,
             playbackRate: [0.5, 0.75, 1],
             autoplay: true,
-            videoFillMode: 'contain',
-            mp4plugin: {
-                maxBufferLength: 15,
-                minBufferLength: 5,
-                // reqOptions: {
-                //     mode: 'cors',
-                //     method: 'POST',
-                //     headers: { // 需要带的自定义请求头
-                //         'x-test-header': 'rrrr'
-                //     },
-                // }
-                // ... 其他配置
-            },
-
-            // 'x5-video-player-type': 'h5',
-            // 'x5-video-player-fullscreen': false,
-
+            // plugins: [Mp4Plugin],
+            // mp4plugin: {
+            //     maxBufferLength: 15,
+            //     minBufferLength: 5,
+            // },
             poster: article.value.head_images[0],
         });
 
@@ -71,15 +62,16 @@ const initializePlayer = async () => {
         })
 
         player.value.on(Events.PLAY, async () => {
+            console.log("player play")
         })
 
-        player.value.on(Events.ENDED, () => {
-            player.value.destroy();
-            player.value = null;
+        player.value.on(Events.ENDED, async () => {
+            console.log("player ended")
+            await updateMediaSource();
         });
 
         player.value.on(Events.ERROR, (error) => {
-            alert(`Player失败: ${error.errorCode} ${error.message} mediaError: ${error.mediaError?.code} ${error.mediaError?.message}`);
+            alert(`视频播放失败: ${error.errorCode} ${error.message} mediaError: ${error.mediaError?.code} ${error.mediaError?.message}`);
         })
     } catch (error) {
         console.error("Failed to load video:", error);
@@ -87,6 +79,17 @@ const initializePlayer = async () => {
     }
 };
 
+const updateMediaSource = async () => {
+    if (player.value) {
+        const { data } = await postApi.play(route.params.id);
+        if (!data.url) {
+            alert("视频地址不存在");
+            return;
+        }
+        player.value.switchURL(data.url)
+    }
+};
+
 const handleBuy = async () => {
     if (buying.value) return;
     buying.value = true;
@@ -100,11 +103,11 @@ const handleBuy = async () => {
             {
                 ...payData,
             },
-            function (res) {
+            async function (res) {
                 if (res.err_msg === "get_brand_wcpay_request:ok") {
                     // 支付成功，刷新文章数据
                     fetchArticle();
-                    //TODO: reload media loadVideoSource();
+                    await updateMediaSource();
                 } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
                     // 用户取消支付
                     console.log("Payment cancelled");
@@ -135,7 +138,6 @@ const fetchArticle = async () => {
         const { data } = await postApi.show(id);
         article.value = data;
 
-
         // 调用微信 JS SDK 分享接口
         wx.setShareInfo({
             title: article.value.title,
@@ -183,6 +185,7 @@ onMounted(async () => {
 onUnmounted(() => {
     if (player.value) {
         player.value.destroy();
+        player.value = null;
     }
 });
 </script>
@@ -202,20 +205,13 @@ onUnmounted(() => {
 
         <div class="flex-1">
             <div v-if="article">
-                <!-- <video webkit-playsinline playsinline ref="videoElement" :poster="article.head_images[0]"
-                    class="w-full aspect-video object-cover plyr-video" preload="none">
-                    <source type="video/mp4" />
-                    Your browser does not support the video tag.
-                </video> -->
                 <div id="player">
                     <div class="relative flex items-center justify-center bg-gray-100">
                         <div @click="initializePlayer"
-                            class="absolute shadow shadow-white z-1 rounded-full bg-orange-500 text-white border-2 border-yellow-500 font-bold px-8 py-4">
+                            class="absolute z-1 rounded-full bg-orange-500 text-white border-2 border-yellow-500 font-bold px-4 py-2">
                             点击播放
                         </div>
-
-                        <img class="z-0 w-full brightness-50 blur-xs" :src="article.head_images[0]"
-                            :alt="article.title" />
+                        <img class="z-0 w-full brightness-50" :src="article.head_images[0]" :alt="article.title" />
                     </div>
                 </div>