fix: 修复预览播放器三个问题 - 素材静音+自动连播+标题显示

1. 素材原声静音：video 标签添加 muted 属性，只播放配音音频 2. 片段自动连播：switchToSegment 后自动调用 video.play() 3. 标题显示：移除 display:grid 避免堆叠上下文冲突，添加 isolation:isolate
2026-08-18 22:00:20 +08:00
3 changed files with 10 additions and 3 deletions
@@ -256,6 +256,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
      {/* ✅ 不再创建 .xx-preview-video 容器，直接渲染 video + 覆盖层 */}
      {/* video 元素 — 由父组件 .xx-preview-video 容器提供定位和尺寸 */}
      <video
+        muted
        ref={videoRef}
        preload="auto"
        style={{
@@ -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 {
@@ -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)