diff --git a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
index 9378caa1b..92d4b16df 100644
--- a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
+++ b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
@@ -250,9 +250,17 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
   // ── Canvas ResizeObserver ──
   const canvasContainerRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
+    if (!useWebCodecs || !canPlay) return
     const container = canvasContainerRef.current
     const canvas = canvasRef.current
     if (!container || !canvas) return
+    // 立即设置一次 canvas 像素分辨率，避免默认 300×150 导致首帧变形
+    const initRect = container.getBoundingClientRect()
+    if (initRect.width > 0 && initRect.height > 0) {
+      const dpr = window.devicePixelRatio || 1
+      canvas.width = initRect.width * dpr
+      canvas.height = initRect.height * dpr
+    }
     const ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect
@@ -264,7 +272,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
     })
     ro.observe(container)
     return () => ro.disconnect()
-  }, [])
+  }, [useWebCodecs, canPlay])
 
   // ── 未就绪 ──
   if (!ready || !assets.length) {