fix: 视频素材缩略图改为hover播放，移除autoPlay避免性能问题

2026-08-06 17:17:39 +08:00
parent c411b732bd
commit 57c181ce97
1 changed files with 21 additions and 2 deletions
@@ -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 ? (