From 4e9c9a2eda762b0fa1014952ee4134bd4a422a7f Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Sat, 22 Aug 2026 02:37:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A6=81=E7=94=A8useCanvasPlayer?=
 =?UTF-8?q?=E5=90=8E=E5=8F=B0=E8=A7=A3=E7=A0=81+=E6=81=A2=E5=A4=8D?=
 =?UTF-8?q?=E6=89=80=E6=9C=89video=E9=A2=84=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useCanvasPlayer 新增 enabled 参数，enabled=false 时 hasSupport=false
  且 init useEffect 直接 return，彻底不执行 WebCodecs 初始化和后台解码
- FrontendPreviewPlayer 传入 enabled=(useWebCodecs && !forceVideoFallback)，
  useWebCodecs=false 时 useCanvasPlayer 完全不启动，消除网页卡顿元凶
- 恢复所有 video 元素 preload=auto + src，撤掉条件预加载逻辑
  （之前条件预加载导致 switchToSegment 时频繁动态设 src，影响播放和进度）
---
 .../components/FrontendPreviewPlayer.tsx      | 53 +++++++++----------
 .../pages/generate/hooks/useCanvasPlayer.ts   |  4 +-
 2 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
index 364abcc81..c38058815 100644
--- a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
+++ b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
@@ -124,9 +124,10 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
 
   const { state: canvasState, controls: canvasControls } = useCanvasPlayer(
     canvasRef,
-    canvasSegments,
+    useWebCodecs && !forceVideoFallback ? canvasSegments : [],
     useWebCodecs && !forceVideoFallback ? canvasTitle : undefined,
     handleCanvasError,
+    useWebCodecs && !forceVideoFallback,
   )
 
   // WebCodecs 报告解码失败时自动切换到 video fallback
@@ -365,33 +366,29 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
 
       {/* ── Video 渲染层（默认路径，浏览器原生硬件解码） ── */}
       {!effectiveUseWebCodecs &&
-        segments.map((seg, i) => {
-          // 只预加载当前片段和下一个片段，其余延迟加载
-          const shouldPreload = i <= videoCurrentSegIdx + 1
-          return (
-            <video
-              key={seg.assetId}
-              muted
-              ref={(el) => {
-                videoRefs.current[i] = el
-              }}
-              preload={shouldPreload ? "auto" : "none"}
-              src={shouldPreload ? seg.videoUrl : undefined}
-              style={{
-                position: "absolute",
-                inset: 0,
-                width: "100%",
-                height: "100%",
-                objectFit: "contain",
-                background: "#000",
-                zIndex: 1,
-                opacity: i === videoCurrentSegIdx ? 1 : 0,
-                pointerEvents: i === videoCurrentSegIdx ? "auto" : "none",
-              }}
-              playsInline
-            />
-          )
-        })}
+        segments.map((seg, i) => (
+          <video
+            key={seg.assetId}
+            muted
+            ref={(el) => {
+              videoRefs.current[i] = el
+            }}
+            preload="auto"
+            src={seg.videoUrl}
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "contain",
+              background: "#000",
+              zIndex: 1,
+              opacity: i === videoCurrentSegIdx ? 1 : 0,
+              pointerEvents: i === videoCurrentSegIdx ? "auto" : "none",
+            }}
+            playsInline
+          />
+        ))}
 
       {/* 播放按钮 */}
       {!isPlaying && (
diff --git a/apps/web/src/pages/generate/hooks/useCanvasPlayer.ts b/apps/web/src/pages/generate/hooks/useCanvasPlayer.ts
index 360694f28..10d14df0b 100644
--- a/apps/web/src/pages/generate/hooks/useCanvasPlayer.ts
+++ b/apps/web/src/pages/generate/hooks/useCanvasPlayer.ts
@@ -239,9 +239,10 @@ export function useCanvasPlayer(
     shadow?: boolean
   },
   onError?: (error: Error) => void,
+  enabled: boolean = true,
 ) {
   const [state, setState] = useState<CanvasPlayerState>({
-    hasSupport: isWebCodecsSupported(),
+    hasSupport: enabled && isWebCodecsSupported(),
     isPlaying: false,
     currentTime: 0,
     duration: 0,
@@ -909,6 +910,7 @@ export function useCanvasPlayer(
 
   // ── 初始化：加载并解码所有片段 ──
   useEffect(() => {
+    if (!enabled) return
     if (!state.hasSupport || segments.length === 0) {
       console.log("[useCanvasPlayer] Skip init:", {
         hasSupport: state.hasSupport,