From 771c7f8b3b8a0bb3a6c8e72dacc868cb40a2b8a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=AE=8F=E6=9D=B0?=
 <zhanghongjie@xiaoxiajianji.com>
Date: Tue, 18 Aug 2026 22:04:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E4=B8=89=E4=B8=AA=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20-=20=E7=B4=A0=E6=9D=90=E9=9D=99=E9=9F=B3+=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E8=BF=9E=E6=92=AD+=E6=A0=87=E9=A2=98=E6=98=BE=E7=A4=BA=20(#143?=
 =?UTF-8?q?1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. video 标签添加 muted 属性，静音素材原声只播放配音
2. 片段切换后自动调用 play() 实现连续播放
3. 移除 .xx-preview-video 的 display:grid 并添加 isolation:isolate 修复标题遮挡
---
 .../pages/generate/components/FrontendPreviewPlayer.tsx  | 1 +
 apps/web/src/pages/generate/generate.css                 | 3 +--
 apps/web/src/pages/generate/hooks/useSegmentScheduler.ts | 9 ++++++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
index 479d18a7f..022a77544 100644
--- a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
+++ b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
@@ -256,6 +256,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
       {/* ✅ 不再创建 .xx-preview-video 容器，直接渲染 video + 覆盖层 */}
       {/* video 元素 — 由父组件 .xx-preview-video 容器提供定位和尺寸 */}
       <video
+        muted
         ref={videoRef}
         preload="auto"
         style={{
diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
index 4d1593067..5ad4f589c 100644
--- a/apps/web/src/pages/generate/generate.css
+++ b/apps/web/src/pages/generate/generate.css
@@ -895,13 +895,12 @@
   max-height: 400px;
   border-radius: var(--radius-md);
   background: linear-gradient(135deg, var(--color-gray-900), var(--color-primary-900));
-  display: grid;
-  place-items: center;
   color: var(--text-inverse);
   font-size: 36px;
   position: relative;
   overflow: hidden;
   margin-bottom: 16px;
+  isolation: isolate;
 }
 
 .xx-preview-video::before {
diff --git a/apps/web/src/pages/generate/hooks/useSegmentScheduler.ts b/apps/web/src/pages/generate/hooks/useSegmentScheduler.ts
index 0f245007c..c701cbcec 100644
--- a/apps/web/src/pages/generate/hooks/useSegmentScheduler.ts
+++ b/apps/web/src/pages/generate/hooks/useSegmentScheduler.ts
@@ -254,7 +254,14 @@ export function useSegmentScheduler(segments: PlaybackSegment[]): SegmentSchedul
     if (video.currentTime >= seg.endTime - 0.15) {
       const nextIndex = currentSegmentIndex + 1
       if (nextIndex < segments.length) {
-        switchToSegment(nextIndex)
+        switchToSegment(nextIndex).then(() => {
+          const v = videoRef.current
+          if (v) {
+            v.play().catch((e) =>
+              console.warn("[useSegmentScheduler] auto-play next segment failed:", e),
+            )
+          }
+        })
         const accumulatedTime =
           (timelineStarts[currentSegmentIndex] || 0) + (seg.endTime - seg.startTime)
         setCurrentTime(accumulatedTime)