fix: 第12轮 — 背压超时保护+帧输出等待+feedFrames阈值

- 背压等待加 idleTicks 计数，超3秒自动break防止死循环
- 解码完成后等待帧输出（最多500ms），确保队列有帧
- 加解码完成日志便于排查
- renderFrame 中 feedFrames 调用加 size<80 阈值保护

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

@@ -560,17 +560,26 @@ export function useCanvasPlayer(
       // 从 cursor 继续喂 sample（流水线批量提交，不 await 单个 decode）
       let decoded = 0
       let si = cursor
+      let idleTicks = 0 // 背压等待计数器，防止死循环
       while (si < samples.length && decoded < maxFrames) {
         if (decodeGenerationRef.current !== gen || isDestroyedRef.current) break
         if ((decoder.state as string) === "closed") break
-        // 队列快满时停止，等播放消费后再补充
         if (frameQueueRef.current.size >= 180) break
-        // 解码器内部队列积压过多时暂停提交，做背压
+        // 解码器内部队列积压时短暂等待
         if (decoder.decodeQueueSize > 20) {
+          idleTicks++
+          if (idleTicks > 300) {
+            // 等待超过3秒（300×10ms），解码器可能卡住，放弃这批
+            console.warn(
+              `[useCanvasPlayer] Segment ${segIdx} decode backpressure timeout after 3s, decoded ${decoded} frames`,
+            )
+            break
+          }
           await new Promise((r) => setTimeout(r, 10))
           continue
         }
 
+        idleTicks = 0
         const sample = samples[si]
         si++
         if (!sample.data) continue
@@ -583,7 +592,6 @@ export function useCanvasPlayer(
         })
 
         try {
-          // 不 await 单个 decode，让硬件解码器流水线并行处理
           decoder.decode(chunk)
           decoded++
         } catch (e) {
@@ -594,8 +602,18 @@ export function useCanvasPlayer(
 
       cursor = si
       segmentSampleCursorRef.current.set(segIdx, cursor)
-      // 给解码器一点时间输出帧
-      await new Promise((r) => setTimeout(r, 16))
+      // 等待解码器输出帧（最多500ms），但不永久阻塞
+      if (decoded > 0 && (decoder.state as string) === "configured") {
+        let waited = 0
+        while (frameQueueRef.current.size < Math.min(decoded, 10) && waited < 500) {
+          await new Promise((r) => setTimeout(r, 20))
+          waited += 20
+          if (isDestroyedRef.current) break
+        }
+      }
+      console.log(
+        `[useCanvasPlayer] Segment ${segIdx} decoded ${decoded} frames, queue size: ${frameQueueRef.current.size}`,
+      )
       return decoded
     },
     [],
@@ -769,7 +787,9 @@ export function useCanvasPlayer(
         return s
       })
       // 后台补充帧：队列不足时自动续解码
-      feedFrames(currentTime)
+      if (frameQueueRef.current.size < 80) {
+        void feedFrames(currentTime)
+      }
     }
 
     if (currentTime >= totalDuration) {