feat: update video player

frontend/wechat/src/views/ArticleDetail.vue

@@ -28,21 +28,17 @@ I18N.use(ZH)
 
 
 const initializePlayer = async () => {
-    if (!videoElement.value) {
+    try {
-        console.error("Video element not found");
+        const { data } = await postApi.play(route.params.id);
+        if (!data.url) {
+            alert("视频地址不存在");
             return;
         }
 
-    try {
-        const { data } = await postApi.play(route.params.id);
-
         player.value = new Player({
-            // id: 'player',
+            id: 'player',
-            el: videoElement.value,
             url: data.url,
-            // height: '100%',
             width: '100%',
-            // marginControls: true,
             fitVideoSize: 'fixWidth',
             fluid: true,
             plugins: [Mp4Plugin],
@@ -71,17 +67,15 @@ const initializePlayer = async () => {
         });
 
         player.value.on(Events.READY, async () => {
-            await loadVideoSource();
+            console.log("player ready")
         })
 
         player.value.on(Events.PLAY, async () => {
-            if (!mediaLoaded.value) {
-                await loadVideoSource();
-            }
         })
 
         player.value.on(Events.ENDED, () => {
-            mediaLoaded.value = false;
+            player.value.destroy();
+            player.value = null;
         });
 
         player.value.on(Events.ERROR, (error) => {
@@ -91,53 +85,6 @@ const initializePlayer = async () => {
         console.error("Failed to load video:", error);
         alert("视频加载失败: " + error.response.data);
     }
-
-    // if (videoElement.value) {
-    //     player.value = new Plyr(videoElement.value, {
-    //         controls: [
-    //             "play",
-    //             "progress",
-    //             "current-time",
-    //             "duration",
-    //             "settings",
-    //             "fullscreen",
-    //         ],
-    //         settings: ["speed"],
-    //         speed: { selected: 1, options: [0.5, 0.75, 1] },
-    //         autoplay: false,
-    //     });
-
-    //     player.value.on("play", async () => {
-    //         if (!mediaLoaded.value) {
-    //             await loadVideoSource();
-    //         }
-    //     });
-
-    //     player.value.on("ended", () => {
-    //         mediaLoaded.value = false;
-    //     });
-    // }
-};
-
-const loadVideoSource = async () => {
-    try {
-        const { data } = await postApi.play(route.params.id);
-        mediaLoaded.value = true;
-        player.value.src = data.url;
-
-
-        // if (videoElement.value) {
-        //     mediaLoaded.value = true;
-
-        // videoElement.value.src = data.url;
-        // await player.value.restart();
-        // await player.value.play();
-        // }
-    } catch (error) {
-        console.error("Failed to load video:", error);
-        alert("视频加载失败: " + error.response.data);
-        await player.value.stop();
-    }
 };
 
 const handleBuy = async () => {
@@ -231,7 +178,6 @@ onMounted(async () => {
         });
 
     await fetchArticle();
-    initializePlayer();
 });
 
 onUnmounted(() => {
@@ -261,7 +207,17 @@ onUnmounted(() => {
                     <source type="video/mp4" />
                     Your browser does not support the video tag.
                 </video> -->
-                <div ref="videoElement" id="player"></div>
+                <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">
+                            点击播放
+                        </div>
+
+                        <img class="z-0 w-full brightness-50 blur-xs" :src="article.head_images[0]"
+                            :alt="article.title" />
+                    </div>
+                </div>
 
                 <div v-if="article && !article.bought" class="bg-white border-b border-gray-200">
                     <div class="text-sm bg-orange-500 text-white px-4 py-2">