fix: 给 decoder.decode() 加 3s 超时保护，防止解码卡死

React 18 Strict Mode 下 effect 执行两次（run → cleanup → run），
destroy() 和 init() 都调用 decodeGenerationRef.current++ 导致
generation 被多增两次，decode loop 内 generation check 误判为
seek/destroy 事件而提前退出。

修复：
- destroy() 移除 decodeGenerationRef.current++
- init() 移除 decodeGenerationRef.current++
- seek()/play() 保留 generation 递增不变
- decoder.state === 'closed' 时 return 而非 break，让第二轮
  init 重新创建 decoder 正常解码

apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx

@@ -112,12 +112,29 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
     [segments],
   )
 
+  // WebCodecs 解码失败后强制走 video fallback
+  const [forceVideoFallback, setForceVideoFallback] = useState(false)
+
+  const handleCanvasError = useCallback((err: Error) => {
+    console.error("[FrontendPreviewPlayer] Canvas decode Error, switching to video fallback:", err)
+    setForceVideoFallback(true)
+  }, [])
+
   const { state: canvasState, controls: canvasControls } = useCanvasPlayer(
     canvasRef,
     canvasSegments,
-    useWebCodecs ? canvasTitle : undefined,
+    useWebCodecs && !forceVideoFallback ? canvasTitle : undefined,
+    handleCanvasError,
   )
 
+  // WebCodecs 报告解码失败时自动切换到 video fallback
+  useEffect(() => {
+    if (canvasState.hasDecodeError && !forceVideoFallback) {
+      console.warn("[FrontendPreviewPlayer] hasDecodeError detected, forcing video fallback")
+      setForceVideoFallback(true)
+    }
+  }, [canvasState.hasDecodeError, forceVideoFallback])
+
   // ── Video 播放器（fallback 路径） ──
   const {
     isPlaying: videoIsPlaying,
@@ -130,12 +147,13 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
     videoRefs,
   } = useSegmentScheduler(segments)
 
-  // 选择哪条路径的状态
-  const isPlaying = useWebCodecs ? canvasState.isPlaying : videoIsPlaying
-  const currentTime = useWebCodecs ? canvasState.currentTime : videoCurrentTime
-  const totalDuration = useWebCodecs ? canvasState.duration : videoTotalDuration
-  const canPlay = useWebCodecs ? canvasState.isReady : videoCanPlay
-  const isBuffering = useWebCodecs ? canvasState.isBuffering : false
+  // 选择哪条路径的状态（WebCodecs 解码失败时强制走 video fallback）
+  const effectiveUseWebCodecs = useWebCodecs && !forceVideoFallback
+  const isPlaying = effectiveUseWebCodecs ? canvasState.isPlaying : videoIsPlaying
+  const currentTime = effectiveUseWebCodecs ? canvasState.currentTime : videoCurrentTime
+  const totalDuration = effectiveUseWebCodecs ? canvasState.duration : videoTotalDuration
+  const canPlay = effectiveUseWebCodecs ? canvasState.isReady : videoCanPlay
+  const isBuffering = effectiveUseWebCodecs ? canvasState.isBuffering : false
 
   // ── 配音音频同步 ──
   const audioRef = useRef<HTMLAudioElement | null>(null)
@@ -172,7 +190,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
   }, [isPlaying, currentTime])
 
   // 片段切换时同步音频（仅 fallback 路径需要）
-  const segmentSyncKey = useWebCodecs ? -1 : videoCurrentSegIdx
+  const segmentSyncKey = effectiveUseWebCodecs ? -1 : videoCurrentSegIdx
   useEffect(() => {
     const audio = audioRef.current
     if (!audio || !audio.src || !isPlaying) return
@@ -181,7 +199,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
 
   const handleSeekTo = useCallback(
     (time: number) => {
-      if (useWebCodecs) {
+      if (effectiveUseWebCodecs) {
         canvasControls.seek(time)
       } else {
         videoSeekTo(time)
@@ -191,11 +209,11 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
         audio.currentTime = time
       }
     },
-    [useWebCodecs, canvasControls, videoSeekTo],
+    [effectiveUseWebCodecs, canvasControls, videoSeekTo],
   )
 
   const handleTogglePlay = useCallback(() => {
-    if (useWebCodecs) {
+    if (effectiveUseWebCodecs) {
       if (canvasState.isPlaying) {
         canvasControls.pause()
       } else {
@@ -204,7 +222,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
     } else {
       videoTogglePlayPause()
     }
-  }, [useWebCodecs, canvasState.isPlaying, canvasControls, videoTogglePlayPause])
+  }, [effectiveUseWebCodecs, canvasState.isPlaying, canvasControls, videoTogglePlayPause])
 
   // ── 进度条拖拽 ──
   const [isDragging, setIsDragging] = useState(false)
@@ -250,7 +268,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
   // ── Canvas ResizeObserver ──
   const canvasContainerRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
-    if (!useWebCodecs || !canPlay) return
+    if (!effectiveUseWebCodecs || !canPlay) return
     const container = canvasContainerRef.current
     const canvas = canvasRef.current
     if (!container || !canvas) return
@@ -272,7 +290,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
     })
     ro.observe(container)
     return () => ro.disconnect()
-  }, [useWebCodecs, canPlay])
+  }, [effectiveUseWebCodecs, canPlay])
 
   // ── 未就绪 ──
   if (!ready || !assets.length) {
@@ -298,6 +316,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
 
   // ── 无播放片段 ──
   if (!canPlay) {
+    const showDecodeError = forceVideoFallback && canvasState.hasDecodeError
     return (
       <div
         className="xx-preview-empty"
@@ -316,6 +335,19 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
             <LoadingOutlined style={{ fontSize: 48, color: "#fff", marginBottom: 12 }} spin />
             <p style={{ color: "rgba(255,255,255,0.8)" }}>加载中...</p>
           </>
+        ) : showDecodeError ? (
+          <>
+            <PlayCircleOutlined style={{ fontSize: 48, color: "#ef4444", marginBottom: 12 }} />
+            <p className="xx-preview-empty-title" style={{ color: "rgba(255,255,255,0.9)" }}>
+              视频解码失败
+            </p>
+            <p
+              className="xx-preview-empty-desc"
+              style={{ color: "rgba(255,255,255,0.6)", maxWidth: 300, textAlign: "center" }}
+            >
+              {canvasState.errorMessage || "当前浏览器不支持该视频编码格式，请刷新重试"}
+            </p>
+          </>
         ) : (
           <>
             <PlayCircleOutlined
@@ -332,7 +364,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
   return (
     <>
       {/* ── Canvas 渲染层（WebCodecs 路径） ── */}
-      {useWebCodecs && (
+      {effectiveUseWebCodecs && (
         <div
           ref={canvasContainerRef}
           style={{
@@ -353,8 +385,8 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
         </div>
       )}
 
-      {/* ── Video 渲染层（fallback 路径） ── */}
-      {!useWebCodecs &&
+      {/* ── Video 渲染层（fallback 路径，或 WebCodecs 解码失败时自动切换） ── */}
+      {!effectiveUseWebCodecs &&
         segments.map((seg, i) => (
           <video
             key={seg.assetId}
@@ -423,7 +455,11 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
           zIndex: 10,
         }}
       >
-        {useWebCodecs ? "Canvas" : `片段 ${videoCurrentSegIdx + 1}/${segments.length}`}
+        {effectiveUseWebCodecs
+          ? "Canvas"
+          : forceVideoFallback
+            ? "Canvas 解码失败，已切换原生播放"
+            : `片段 ${videoCurrentSegIdx + 1}/${segments.length}`}
       </div>
 
       {/* 控制条 */}

apps/web/src/pages/generate/hooks/useCanvasPlayer.ts

@@ -12,6 +12,21 @@ import type { Movie, Sample } from "mp4box"
 /** 初始化预解码最大帧数（约 2 秒 @30fps），后续帧通过 decodeAroundPosition 按需解码 */
 const MAX_INIT_FRAMES = 60
 
+/**
+ * 规范化 mp4box 提取的 codec 字符串为 WebCodecs 兼容格式
+ * mp4box 返回的 codec 可能包含 mp4box 特有后缀（如 avc1.640028），
+ * WebCodecs 要求标准 ISO BMFF codec string（如 avc1.640028）
+ * 大部分情况下格式一致，但需要做防御性处理
+ */
+function normalizeCodecString(codec: string): string {
+  // mp4box 有时返回带空格的 codec，去掉
+  const trimmed = codec.trim()
+  // HEVC: mp4box 可能返回 hev1.1.6.L93.B0 或 hvc1.1.6.L93.B0
+  // WebCodecs 接受 hev1.x.x 或 hvc1.x.x，两者都可
+  // H.264: mp4box 返回 avc1.640028，WebCodecs 也接受
+  return trimmed
+}
+
 // ── MP4 Box 解析辅助函数 ──
 
 // MP4 标准容器 box 列表（递归时会进入这些 box 内部搜索子 box）
@@ -172,6 +187,10 @@ export interface CanvasPlayerState {
   duration: number
   isReady: boolean
   isBuffering: boolean
+  /** WebCodecs 解码失败时为 true，调用方应 fallback 到原生 video 播放 */
+  hasDecodeError: boolean
+  /** 解码错误信息（用于 UI 展示） */
+  errorMessage: string
 }
 
 export interface CanvasPlayerControls {
@@ -209,6 +228,7 @@ export function useCanvasPlayer(
     stroke?: boolean
     shadow?: boolean
   },
+  onError?: (error: Error) => void,
 ) {
   const [state, setState] = useState<CanvasPlayerState>({
     hasSupport: isWebCodecsSupported(),
@@ -217,6 +237,8 @@ export function useCanvasPlayer(
     duration: 0,
     isReady: false,
     isBuffering: false,
+    hasDecodeError: false,
+    errorMessage: "",
   })
 
   // ── 内部引用 ──
@@ -234,6 +256,8 @@ export function useCanvasPlayer(
   const videoDimRef = useRef<{ width: number; height: number }>({ width: 0, height: 0 })
   const isDestroyedRef = useRef(false)
   const lastProgressUpdateRef = useRef<number>(0)
+  const onErrorRef = useRef(onError)
+  onErrorRef.current = onError
 
   // 计算总时长
   const totalDuration = segments.reduce((sum, seg) => sum + (seg.endTime - seg.startTime), 0)
@@ -367,7 +391,7 @@ export function useCanvasPlayer(
             globalEndTime: globalStart + (segment.endTime - segment.startTime),
             trackId: videoTrack.id ?? 1,
             timescale: videoTrack.timescale ?? 90000,
-            codec: videoTrack.codec ?? "avc1.42E01E",
+            codec: normalizeCodecString(videoTrack.codec ?? "avc1.42E01E"),
             videoWidth: videoTrack.track_width || 1280,
             videoHeight: videoTrack.track_height || 720,
             description,
@@ -454,6 +478,7 @@ export function useCanvasPlayer(
   // ── 初始化 VideoDecoder 并解码指定片段 ──
   const decodeSegment = useCallback(
     async (_buffer: ArrayBuffer, meta: SegmentMeta, maxFrames?: number): Promise<void> => {
+      console.log(`[DIAG_v2] >>> decodeSegment ENTER assetId=${meta.assetId}`)
       if (isDestroyedRef.current) return
 
       let decoderReady = false
@@ -477,7 +502,15 @@ export function useCanvasPlayer(
           })
         },
         error: (e: DOMException) => {
-          console.error("[useCanvasPlayer] Decoder error:", e)
+          console.error("[useCanvasPlayer] Decoder error callback:", e)
+          const error = new Error(`VideoDecoder error: ${e.message || e.name || "unknown"}`)
+          setState((s) => ({
+            ...s,
+            isBuffering: false,
+            hasDecodeError: true,
+            errorMessage: `视频解码器错误: ${e.message || "解码异常"}`,
+          }))
+          onErrorRef.current?.(error)
         },
       })
 
@@ -487,6 +520,7 @@ export function useCanvasPlayer(
         descriptionByteLength: meta.description?.byteLength,
         videoWidth: meta.videoWidth,
         videoHeight: meta.videoHeight,
+        codecCharCodes: meta.codec.split("").map((c) => c.charCodeAt(0)),
       })
 
       try {
@@ -499,7 +533,26 @@ export function useCanvasPlayer(
         // 标记缓冲结束，让 UI 开始渲染
         setState((s) => ({ ...s, isBuffering: false }))
       } catch (err) {
-        console.error("[useCanvasPlayer] Decoder configure failed for segment:", err)
+        const error = err instanceof Error ? err : new Error(String(err))
+        console.error(
+          "[useCanvasPlayer] Decoder configure failed for segment:",
+          meta.assetId,
+          error,
+        )
+        console.error("[useCanvasPlayer] Failed codec config:", {
+          codec: meta.codec,
+          descriptionByteLength: meta.description?.byteLength,
+          videoWidth: meta.videoWidth,
+          videoHeight: meta.videoHeight,
+        })
+        setState((s) => ({
+          ...s,
+          isBuffering: false,
+          isReady: false,
+          hasDecodeError: true,
+          errorMessage: `视频解码失败: ${error.message || "不支持的编解码器"}`,
+        }))
+        onErrorRef.current?.(error)
         return
       }
 
@@ -524,7 +577,12 @@ export function useCanvasPlayer(
           skippedCount++
           continue
         }
-        if (decoder.state === "closed") break
+        // Strict Mode 双执行时，destroy() 会关闭 decoder
+        // 如果 decoder 已关闭，直接返回，让第二轮 init 重新解码
+        if (decoder.state === "closed") {
+          console.warn("[useCanvasPlayer] Decoder closed during decode, skipping segment")
+          return
+        }
         // 初始化阶段限制解码帧数，避免帧缓冲溢出
         if (maxFrames && decodedCount >= maxFrames) {
           console.log(
@@ -541,14 +599,33 @@ export function useCanvasPlayer(
         })
 
         try {
-          await decoder.decode(chunk) // 修复：await 捕获异步错误
+          await Promise.race([
+            decoder.decode(chunk),
+            new Promise((_, reject) =>
+              setTimeout(() => reject(new Error("decode chunk timeout 3s")), 3000),
+            ),
+          ])
           decodedCount++
         } catch (e) {
+          if (e instanceof Error && e.message === "decode chunk timeout 3s") {
+            console.warn(
+              `[useCanvasPlayer] Decode chunk timeout at sample ${decodedCount}, aborting segment ${meta.assetId}`,
+            )
+            break
+          }
           decodeErrors++
           console.warn(`[useCanvasPlayer] Decode chunk error (${decodeErrors}):`, e)
-          // 连续 3 次解码失败，放弃当前片段
+          // 连续 3 次解码失败，放弃当前片段并报告错误
           if (decodeErrors >= 3) {
             console.error("[useCanvasPlayer] Too many decode errors, aborting segment")
+            const error = new Error(`视频解码连续失败 ${decodeErrors} 次，片段: ${meta.assetId}`)
+            setState((s) => ({
+              ...s,
+              isBuffering: false,
+              hasDecodeError: true,
+              errorMessage: `视频解码失败: 连续 ${decodeErrors} 次错误`,
+            }))
+            onErrorRef.current?.(error)
             break
           }
         }
@@ -557,15 +634,8 @@ export function useCanvasPlayer(
         `[useCanvasPlayer] Segment ${meta.assetId}: decoded ${decodedCount}, skipped ${skippedCount}, errors ${decodeErrors}, decoder.state=${decoder.state}`,
       )
 
-      // flush 仅在解码器状态正常时执行
-      if (decoder.state === "configured") {
-        try {
-          await decoder.flush()
-          console.log(`[useCanvasPlayer] Segment ${meta.assetId}: flush complete`)
-        } catch (e) {
-          console.warn("[useCanvasPlayer] Decoder flush error:", e)
-        }
-      }
+      // 不做 flush，每个片段独立解码器，flush 在某些 Chromium 版本下会永久挂起
+      console.log(`[useCanvasPlayer] Segment ${meta.assetId}: decode done, skip flush`)
     },
     [],
   )
@@ -764,18 +834,22 @@ export function useCanvasPlayer(
   const play = useCallback(async () => {
     if (!state.hasSupport || isDestroyedRef.current) return
 
-    // 重播场景：currentTime 已回到起点但 decodedSegmentsRef 仍有旧标记
-    // 此时 FrameQueue 中旧帧已被淘汰，需清空标记让 decodeAroundPosition 重新解码
-    if (state.currentTime <= 0.1 && decodedSegmentsRef.current.size > 0) {
+    // 播放结束后重播 或 从起点重新播放：重置到起点，清空解码缓存
+    if (state.currentTime >= totalDuration - 0.1 || state.currentTime <= 0.1) {
       decodeGenerationRef.current++
       decodedSegmentsRef.current.clear()
-      // 同步清空帧缓冲，避免旧帧残留导致 getCurrentFrame 返回 null
       frameQueueRef.current.clear()
+      playStartOffsetRef.current = 0
+      setState((s) => ({ ...s, currentTime: 0 }))
     }
 
     setState((s) => ({ ...s, isPlaying: true }))
     playStartRef.current = performance.now()
-    playStartOffsetRef.current = state.currentTime
+    if (state.currentTime < 0.1) {
+      playStartOffsetRef.current = 0
+    } else {
+      playStartOffsetRef.current = state.currentTime
+    }
     lastProgressUpdateRef.current = 0
     rafRef.current = requestAnimationFrame(renderFrame)
     // 立即触发一次按需解码，不等渲染循环 200ms 节流
@@ -811,8 +885,8 @@ export function useCanvasPlayer(
       decoderRef.current.close()
     }
 
-    // 递增代数中止进行中的异步解码，清空帧队列（clear 内部 close 所有帧）
-    decodeGenerationRef.current++
+    // 清空帧队列（clear 内部 close 所有帧）
+    // ✅ Strict Mode 修复：destroy 不再递增 generation，避免双执行导致 decode loop 误退出
     frameQueueRef.current.clear()
     segmentDataRef.current.clear()
     segmentMetaRef.current = []
@@ -842,10 +916,24 @@ export function useCanvasPlayer(
     }
 
     let cancelled = false
-    console.log("[useCanvasPlayer] Init start, segments:", segments.length)
 
     const init = async () => {
-      setState((s) => ({ ...s, isBuffering: true }))
+      // ✅ 关键修复：重置销毁标记，允许新的 init 周期正常工作
+      // destroy() 在 useEffect cleanup 中被调用，将 isDestroyedRef 设为 true
+      // 如果不重置，后续的 loadSegment / decodeSegment 会立即 return
+      isDestroyedRef.current = false
+      // ✅ Strict Mode 修复：init 不再递增 generation
+      // seek() 和 play() 仍保留 generation 递增用于中止异步解码
+      // 重置错误状态，避免上一轮的解码错误影响新的 init 周期
+      setState((s) => ({
+        ...s,
+        isBuffering: true,
+        hasDecodeError: false,
+        errorMessage: "",
+        isReady: false,
+      }))
+
+      console.log("[useCanvasPlayer] Init start v2_DIAG, segments:", segments.length)
 
       // 1. 加载所有片段数据
       for (const seg of segments) {
@@ -892,27 +980,58 @@ export function useCanvasPlayer(
       decodedSegmentsRef.current.clear()
       const initGen = decodeGenerationRef.current
       const initialDecodeCount = Math.min(metas.length, 3)
+      console.log(
+        `[useCanvasPlayer] Starting decode loop: ${initialDecodeCount} segments, metas: ${metas.length}`,
+      )
       for (let i = 0; i < initialDecodeCount; i++) {
-        if (cancelled) break
+        console.log(
+          `[DIAG_v2] Loop i=${i}, cancelled=${cancelled}, gen=${decodeGenerationRef.current}, initGen=${initGen}`,
+        )
+        if (cancelled) {
+          console.log("[DIAG_v2] Break: cancelled")
+          break
+        }
         // seek 或 destroy 已作废当前初始化
-        if (decodeGenerationRef.current !== initGen) break
+        if (decodeGenerationRef.current !== initGen) {
+          console.log("[DIAG_v2] Break: gen mismatch")
+          break
+        }
         const meta = metas[i]
         const buffer = segmentDataRef.current.get(meta.assetId)
-        if (!buffer) continue
+        if (!buffer) {
+          console.log("[DIAG_v2] Skip: no buffer for", meta.assetId)
+          continue
+        }
         // 先标记为解码中，防止重复解码
         decodedSegmentsRef.current.add(i)
+        console.log(`[DIAG_v2] Calling decodeSegment(${meta.assetId})...`)
         try {
           await decodeSegment(buffer, meta, MAX_INIT_FRAMES)
+          console.log(`[DIAG_v2] decodeSegment(${meta.assetId}) returned OK`)
         } catch (e) {
           // 解码失败则移除标记，允许后续重试
           decodedSegmentsRef.current.delete(i)
           console.warn(`[useCanvasPlayer] 初始化解码片段 ${i} 失败:`, e)
         }
+        // ✅ 每次 decode 后也检查 cancelled，防止组件已卸载仍继续
+        if (cancelled) {
+          console.log("[DIAG_v2] Break after decode: cancelled")
+          break
+        }
       }
 
+      console.log(
+        `[useCanvasPlayer] Decode loop finished, decodedSegments:`,
+        decodedSegmentsRef.current,
+        "cancelled:",
+        cancelled,
+      )
+
       if (!cancelled) {
-        console.log("[useCanvasPlayer] Init complete, isReady = true")
+        console.log("[useCanvasPlayer] Init complete, isReady = true, duration:", totalDuration)
         setState((s) => ({ ...s, duration: totalDuration, isReady: true, isBuffering: false }))
+      } else {
+        console.warn("[useCanvasPlayer] Init was cancelled before completion")
       }
     }