From 57c181ce97fe013874fb893d8a06928fa64221a4 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 17:17:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=86=E9=A2=91=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E7=BC=A9=E7=95=A5=E5=9B=BE=E6=94=B9=E4=B8=BAhover=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=EF=BC=8C=E7=A7=BB=E9=99=A4autoPlay=E9=81=BF=E5=85=8D?=
 =?UTF-8?q?=E6=80=A7=E8=83=BD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../material/ManualMaterialList.tsx           | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
index af82ee7ea..3b07fa05c 100644
--- a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
+++ b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
@@ -1,7 +1,7 @@
 /**
  * 手动选择素材列表
  */
-import React from "react"
+import React, { useRef, useCallback } from "react"
 import { Typography } from "antd"
 import type { AssetItem } from "@/api/assets"
 
@@ -20,6 +20,16 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
   selectedMaterials,
   onToggle,
 }) => {
+  const handleVideoMouseEnter = useCallback((e: React.MouseEvent<HTMLVideoElement>) => {
+    e.currentTarget.play().catch(() => {})
+  }, [])
+
+  const handleVideoMouseLeave = useCallback((e: React.MouseEvent<HTMLVideoElement>) => {
+    const video = e.currentTarget
+    video.pause()
+    video.currentTime = 0
+  }, [])
+
   return (
     <div style={{ marginTop: 14 }}>
       {materialsLoading ? (
@@ -74,15 +84,24 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                 >
                   {isVideo && m.file_url ? (
                     <video
+                      ref={(el) => {
+                        if (el && m.thumbnail_url) {
+                          // 显示封面帧作为初始画面
+                          el.poster = m.thumbnail_url
+                        }
+                      }}
                       src={m.file_url}
                       muted
                       loop
                       playsInline
-                      autoPlay
+                      preload="none"
+                      onMouseEnter={handleVideoMouseEnter}
+                      onMouseLeave={handleVideoMouseLeave}
                       style={{
                         width: "100%",
                         height: "100%",
                         objectFit: "cover",
+                        cursor: "pointer",
                       }}
                     />
                   ) : thumbSrc ? (