xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 14 Pull Requests 2 Actions Packages Projects Releases 7 Wiki Activity

[P1] 批量预览：卡片缩小至3/5 + 每个视频播放都要有声音（当前仅视频1有配音） #1741

New Issue
Closed
opened 2026-09-06 15:10:41 +08:00 by xiaoxia · 0 comments
xiaoxia commented 2026-09-06 15:10:41 +08:00
Owner
Copy Link
Copy Source

背景

批量生成预览（第3步"N 个视频预览"，CanvasPreviewGrid + FrontendPreviewPlayer），用户实测两个问题（2026-09-06 staging）。

问题 1：预览视频卡片太大，占页面

  • 现状：.xx-canvas-grid 固定 2 列，9:16 竖屏卡片被列宽撑满，卡片高度几乎占满整屏可视区，一屏看不了几个视频，右侧/下方内容要大量滚动。
  • 要求：卡片按比例缩小到约 3/5（60%） 尺寸，保持 9:16 竖屏比例不变、画面不裁切不变形；缩小后一屏能看到更多卡片。
    • 实现建议：宽屏下网格可排 3 列（或卡片限宽居中、gap 合理），卡片内勾选框、片段序号（1/3）、播放按钮、标题浮层等比例适配不溢出；N=1/2/3/4…各数量下布局都正常，窄屏/小窗口回退合理（如小屏仍 2 列或 1 列）。
    • 播放按钮、勾选交互热区不要缩到难点。

问题 2：不是每个视频都有声音（视频2/3 完全无声）

  • 根因（已实查代码）：
    1. FrontendPreviewPlayer.tsx 约 611 行：所有 <video> 元素硬编码 muted，素材原声全部静音
    2. CanvasPreviewGrid.tsx：voiceAudioUrl={i === 0 ? voiceAudioUrl : undefined}——配音音频只挂给第 1 个变体（注释写明"仅第 1 个变体播放，避免多路音频重叠"），视频 2/3… 播放时没有任何音轨
  • 要求（每个视频都能听到声音）：
    1. 每个变体播放时都有声音：去掉仅第 1 个变体挂配音的限制，每个变体都跟随自己的播放进度播放配音（同一条配音 URL 浏览器会缓存，不重复下载）；配音跟随该卡片片段切换/暂停/seek 同步（现有 audio 同步逻辑对每个实例生效）
    2. 音轨与最终成片一致：有配音时以配音音轨为准（素材 video 保持静音，避免素材原声与配音重叠混音）；无配音时素材原声兜底（video 取消静音），保证任何情况下播放都有声音
    3. 播放互斥：点击某个卡片播放时，其他卡片自动暂停（视频+配音都停），避免多路声音同时播放重叠；再次点其他卡片正常切换
    4. 每个卡片上加静音/有声切换按钮（喇叭图标），用户可单独静音某个卡片；默认播放即有声
    5. 浏览器自动播放策略：声音在用户点击播放按钮的手势之后触发，play() 被 reject 时要静默兜底且不阻塞画面播放（现状已有 .catch，保留）
    6. 单视频模式（N=1）行为保持不变、零回归

测试要求

  • 单测/组件测试：N=3 时每个变体组件都拿到 voiceAudioUrl（不再只有 index 0）；播放互斥（播一个停其他）；静音按钮切换；无配音时 video 不 muted
  • 手动/staging 实测：视频 1/2/3 分别点击播放，每个都能听到配音声音；同时只有一个在响；卡片缩小后布局正常、控件可用
  • CI 全绿 + 合并 develop + 部署 staging
## 背景 批量生成预览（第3步"N 个视频预览"，CanvasPreviewGrid + FrontendPreviewPlayer），用户实测两个问题（2026-09-06 staging）。 ## 问题 1：预览视频卡片太大，占页面 - 现状：`.xx-canvas-grid` 固定 2 列，9:16 竖屏卡片被列宽撑满，卡片高度几乎占满整屏可视区，一屏看不了几个视频，右侧/下方内容要大量滚动。 - **要求**：卡片按比例缩小到约 **3/5（60%）** 尺寸，保持 9:16 竖屏比例不变、画面不裁切不变形；缩小后一屏能看到更多卡片。 - 实现建议：宽屏下网格可排 3 列（或卡片限宽居中、gap 合理），卡片内勾选框、片段序号（1/3）、播放按钮、标题浮层等比例适配不溢出；N=1/2/3/4…各数量下布局都正常，窄屏/小窗口回退合理（如小屏仍 2 列或 1 列）。 - 播放按钮、勾选交互热区不要缩到难点。 ## 问题 2：不是每个视频都有声音（视频2/3 完全无声） - 根因（已实查代码）： 1. `FrontendPreviewPlayer.tsx` 约 611 行：所有 `<video>` 元素硬编码 `muted`，素材原声全部静音 2. `CanvasPreviewGrid.tsx`：`voiceAudioUrl={i === 0 ? voiceAudioUrl : undefined}`——配音音频**只挂给第 1 个变体**（注释写明"仅第 1 个变体播放，避免多路音频重叠"），视频 2/3… 播放时没有任何音轨 - **要求（每个视频都能听到声音）**： 1. **每个变体播放时都有声音**：去掉仅第 1 个变体挂配音的限制，每个变体都跟随自己的播放进度播放配音（同一条配音 URL 浏览器会缓存，不重复下载）；配音跟随该卡片片段切换/暂停/seek 同步（现有 audio 同步逻辑对每个实例生效） 2. **音轨与最终成片一致**：有配音时以配音音轨为准（素材 video 保持静音，避免素材原声与配音重叠混音）；**无配音时素材原声兜底**（video 取消静音），保证任何情况下播放都有声音 3. **播放互斥**：点击某个卡片播放时，其他卡片自动暂停（视频+配音都停），避免多路声音同时播放重叠；再次点其他卡片正常切换 4. 每个卡片上加**静音/有声切换按钮**（喇叭图标），用户可单独静音某个卡片；默认播放即有声 5. 浏览器自动播放策略：声音在用户点击播放按钮的手势之后触发，play() 被 reject 时要静默兜底且不阻塞画面播放（现状已有 .catch，保留） 6. 单视频模式（N=1）行为保持不变、零回归 ## 测试要求 - 单测/组件测试：N=3 时每个变体组件都拿到 voiceAudioUrl（不再只有 index 0）；播放互斥（播一个停其他）；静音按钮切换；无配音时 video 不 muted - 手动/staging 实测：视频 1/2/3 分别点击播放，每个都能听到配音声音；同时只有一个在响；卡片缩小后布局正常、控件可用 - CI 全绿 + 合并 develop + 部署 staging
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1741
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?