From 93dd4f388fa944d18a42e4a9fb213df350e4e380 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Sun, 2 Aug 2026 18:47:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=86=E9=A6=96=E9=A1=B5=E9=82=A3?=
 =?UTF-8?q?=E4=BA=9B=E6=94=B9=E4=B8=BA=E6=94=AF=E6=8C=81=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=9A=84=E5=92=8C=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ExploreCards/index.vue         | 28 ++++++++++-
 .../components/PanoramicHome/index.vue        | 48 +++++++++++++++++--
 2 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/src/pages/Discovery/components/ExploreCards/index.vue b/src/pages/Discovery/components/ExploreCards/index.vue
index 0de33ca..94e2225 100644
--- a/src/pages/Discovery/components/ExploreCards/index.vue
+++ b/src/pages/Discovery/components/ExploreCards/index.vue
@@ -5,7 +5,27 @@
         <view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="explore-card"
           :class="`is-${item.tone}`" hover-class="is-pressed" hover-stay-time="80"
           @tap="handleCardTap(item.raw, index)">
-          <image v-if="item.coverImage" class="explore-card-image" :src="item.coverImage" mode="aspectFill" />
+          <video
+            v-if="item.coverImage && isMp4Video(item.coverImage)"
+            class="explore-card-image"
+            :src="item.coverImage"
+            autoplay
+            loop
+            muted
+            :controls="false"
+            :show-center-play-btn="false"
+            :show-play-btn="false"
+            :show-fullscreen-btn="false"
+            :show-mute-btn="false"
+            :enable-progress-gesture="false"
+            object-fit="cover"
+          />
+          <image
+            v-else-if="item.coverImage"
+            class="explore-card-image"
+            :src="item.coverImage"
+            mode="aspectFill"
+          />
 
           <view class="explore-card-gradient" />
 
@@ -55,6 +75,12 @@ const normalizedList = computed(() =>
 
 const getItemKey = (item, index) => item.id ?? item.title ?? index;
 
+const isMp4Video = (url) => {
+  if (typeof url !== "string") return false;
+  const resourcePath = url.trim().split(/[?#]/)[0];
+  return resourcePath.toLowerCase().endsWith(".mp4");
+};
+
 const handleCardTap = (item, index) => {
   emit("didSelectItem", item, index);
 };
diff --git a/src/pages/Discovery/components/PanoramicHome/index.vue b/src/pages/Discovery/components/PanoramicHome/index.vue
index c9d7a16..8c803f5 100644
--- a/src/pages/Discovery/components/PanoramicHome/index.vue
+++ b/src/pages/Discovery/components/PanoramicHome/index.vue
@@ -80,7 +80,27 @@
             v-for="(card, cardIndex) in panoramaOtherCards"
             :key="card.homePageId || cardIndex"
           >
-            <image class="h-full w-full" :src="card.coverImageUrl" mode="aspectFill" />
+            <video
+              v-if="isMp4Video(card.coverImageUrl)"
+              class="h-full w-full"
+              :src="card.coverImageUrl"
+              autoplay
+              loop
+              muted
+              :controls="false"
+              :show-center-play-btn="false"
+              :show-play-btn="false"
+              :show-fullscreen-btn="false"
+              :show-mute-btn="false"
+              :enable-progress-gesture="false"
+              object-fit="cover"
+            />
+            <image
+              v-else
+              class="h-full w-full"
+              :src="card.coverImageUrl"
+              mode="aspectFill"
+            />
           </swiper-item>
         </swiper>
 
@@ -124,7 +144,27 @@
         hover-stay-time="80"
         @tap="handleCardTap(card)"
       >
-        <image class="h-full w-full" :src="card.coverImageUrl" mode="aspectFill" />
+        <video
+          v-if="isMp4Video(card.coverImageUrl)"
+          class="h-full w-full"
+          :src="card.coverImageUrl"
+          autoplay
+          loop
+          muted
+          :controls="false"
+          :show-center-play-btn="false"
+          :show-play-btn="false"
+          :show-fullscreen-btn="false"
+          :show-mute-btn="false"
+          :enable-progress-gesture="false"
+          object-fit="cover"
+        />
+        <image
+          v-else
+          class="h-full w-full"
+          :src="card.coverImageUrl"
+          mode="aspectFill"
+        />
 
         <view class="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,rgba(5,24,24,0.72)_0%,rgba(5,24,24,0.18)_46%,rgba(5,24,24,0.34)_100%)]" />
 
@@ -161,7 +201,9 @@ const activeOtherCard = computed(() => {
 });
 
 const isMp4Video = (url) => {
-  return typeof url === "string" && /\.mp4(?:[?#].*)?$/i.test(url.trim());
+  if (typeof url !== "string") return false;
+  const resourcePath = url.trim().split(/[?#]/)[0];
+  return resourcePath.toLowerCase().endsWith(".mp4");
 };
 
 const handleSwiperChange = (event) => {