产品介绍视频自动化生成。当用户需要创建产品演示视频、公司介绍短片、宣传片时使用。支持录屏演示型、图文展示型、混合型三种视频类型。
在开始制作前,首先确定视频类型:
| 类型 | 代号 | 适用场景 | 核心素材 |
|---|---|---|---|
| 录屏演示型 | demo |
软件功能演示、操作教程 | Playwright 录屏 |
| 图文展示型 | slideshow |
公司介绍、产品历程、概念宣传 | 图片 + 文字动画 |
| 混合型 | mixed |
产品宣传片 | 录屏 + 图片 + 动画 |
用户需求分析
│
├─ 需要展示软件操作? ──→ demo 或 mixed
│
├─ 纯图文概念展示? ──→ slideshow
│
└─ 两者都需要? ──→ mixed
┌─────────────────────────────────────────────────────────────┐
│ Phase 1: 需求分析与分镜设计 │
│ ├── 确定视频类型 (demo/slideshow/mixed) │
│ ├── 分析目标受众和核心信息 │
│ ├── 设计视频结构和时间线 │
│ ├── 编写分镜脚本和配音文案 │
│ └── 【必须】等待用户确认分镜脚本 │
├─────────────────────────────────────────────────────────────┤
│ Phase 2: 素材准备 │
│ ├── [demo] 执行 Playwright 录屏,记录时间线 │
│ ├── [slideshow] 收集图片素材 (见 asset-collection skill) │
│ ├── [mixed] 录屏 + 图片收集 │
│ └── 素材格式转换和优化 │
├─────────────────────────────────────────────────────────────┤
│ Phase 3: 配音生成 │
│ ├── 根据分镜计算配音时间线 │
│ ├── 生成各段配音音频 (edge-tts) │
│ ├── 【新增】验证配音时长和同步性 │
│ ├── 合并配音到单个音轨 (FFmpeg adelay) │
│ └── 检测并处理配音空白间隙 │
├─────────────────────────────────────────────────────────────┤
│ Phase 4: 视频合成 │
│ ├── 创建 Remotion 项目和场景组件 │
│ ├── [demo] 使用 Video 组件嵌入录屏 │
│ ├── [slideshow] 使用 Img + 动画组件 │
│ ├── 渲染最终视频 │
│ └── 音量标准化后期处理 │
├─────────────────────────────────────────────────────────────┤
│ Phase 5: 验收交付 │
│ ├── 打开视频供用户审查 │
│ ├── 根据反馈调整 │
│ └── 最终交付 │
└─────────────────────────────────────────────────────────────┘
绝对禁止直接开始制作!必须:
| 素材类型 | 最低要求 | 推荐规格 |
|---|---|---|
| 背景图 | 1920×1080 | 2560×1440+ |
| Logo | 400×400 PNG | SVG 矢量 |
| 人物照片 | 800×800 | 1200×1200+ |
| 录屏视频 | 1920×1080 30fps | 同左 |
生成配音后必须验证:
00:00-00:08 片头
- Logo 动画 (spring 缩放 + 发光)
- 主标题 + 副标题 (淡入)
配音: "[主题]简介"
00:08-00:XX 内容场景 (根据需要重复)
- 年份/关键词大字
- 背景图 (低透明度)
- 核心信息文字
配音: 对应内容解说
XX:XX-结束 片尾
- Logo + 发光脉动
- 总结文字
- 数据展示 (可选)
配音: 总结语
00:00-00:10 片头
- Logo + 产品名
- 一句话定位
配音: "欢迎使用..."
00:10-00:18 功能亮点
- 功能卡片展示
配音: 功能概述
00:18-XX:XX 核心演示
- 完整录屏
- 各功能点配音同步
配音: 根据录屏时间线
XX:XX-结束 片尾
- Logo + 口号
- 行动号召
配音: "立即开始使用"
| 需求 | 推荐方案 | 备选方案 |
|---|---|---|
| 视频合成 | Remotion | FFmpeg 纯命令行 |
| 浏览器录屏 | Playwright | Puppeteer |
| 中文配音 | edge-tts (免费) | Azure TTS (付费) |
| 音频处理 | FFmpeg | - |
| 图片素材 | Unsplash/Pexels | Pixabay |
project/
├── public/
│ ├── images/ # 图片素材
│ │ ├── logos/
│ │ ├── backgrounds/
│ │ └── photos/
│ ├── recordings/ # 录屏文件 (demo 类型)
│ │ ├── full_demo.mp4
│ │ └── timeline.json
│ └── audio/
│ ├── segments/ # 配音片段
│ ├── synced_voiceover.mp3
│ └── voiceover_metadata.json
├── src/
│ ├── index.ts
│ ├── Root.tsx
│ ├── MainVideo.tsx
│ ├── scenes/ # 场景组件
│ └── components/ # 可复用组件
├── scripts/
│ ├── collect_assets.sh # 素材收集
│ ├── record_demo.js # 录屏脚本
│ └── generate_voiceover.py
└── out/
└── final.mp4
/storyboard - 分镜脚本设计/asset-collection - 素材收集 (图文视频)/recording - 浏览器录屏 (演示视频)/voiceover - 配音生成与验证/compositing - 视频合成与渲染