144 lines
4.2 KiB
Markdown
144 lines
4.2 KiB
Markdown
---
|
||
name: 试题讲解视频生成功能开发
|
||
overview: 在 QuestionExplanation.vue 页面添加视频生成功能，将已生成的图片和音频合成为完整视频，支持在线预览、下载，并显示详细的生成进度。
|
||
design:
|
||
architecture:
|
||
framework: vue
|
||
styleKeywords:
|
||
- Dark Theme
|
||
- Glassmorphism
|
||
- Minimalist
|
||
fontSystem:
|
||
fontFamily: PingFang SC
|
||
heading:
|
||
size: 1.25rem
|
||
weight: 600
|
||
subheading:
|
||
size: 1rem
|
||
weight: 500
|
||
body:
|
||
size: 0.875rem
|
||
weight: 400
|
||
colorSystem:
|
||
primary:
|
||
- "#8b5cf6"
|
||
- "#3b82f6"
|
||
background:
|
||
- "#0f172a"
|
||
- "#1e293b"
|
||
text:
|
||
- "#ffffff"
|
||
- rgba(255,255,255,0.6)
|
||
functional:
|
||
- "#22c55e"
|
||
- "#ef4444"
|
||
todos:
|
||
- id: create-composer
|
||
content: 创建 videoComposer.js 封装 ffmpeg.wasm 合成逻辑
|
||
status: completed
|
||
- id: add-video-config
|
||
content: 在 config/index.js 添加视频相关配置
|
||
status: completed
|
||
- id: implement-compose-ui
|
||
content: 在 QuestionExplanation.vue 添加合成按钮和进度显示
|
||
status: completed
|
||
dependencies:
|
||
- create-composer
|
||
- add-video-config
|
||
- id: implement-preview-download
|
||
content: 实现视频预览和下载功能
|
||
status: completed
|
||
dependencies:
|
||
- implement-compose-ui
|
||
- id: integrate-workflow
|
||
content: 整合视频合成到现有生成流程
|
||
status: completed
|
||
dependencies:
|
||
- implement-preview-download
|
||
---
|
||
|
||
## 产品概述
|
||
|
||
在现有试题讲解页面基础上，新增视频合成功能，将已生成的图片和音频合成为完整的教学讲解视频。
|
||
|
||
## 核心功能
|
||
|
||
- 将多个讲解点的图片和音频按顺序合成为单一视频文件
|
||
- 视频生成过程中显示详细进度（资源下载、片段合成、视频编码等步骤）
|
||
- 支持在线预览生成的视频
|
||
- 支持下载视频到本地
|
||
|
||
## 技术栈
|
||
|
||
- 视频合成：ffmpeg.wasm（已安装 @ffmpeg/ffmpeg@0.12.15）
|
||
- 现有框架：Vue 3 + Vite
|
||
- HTTP 请求：axios（已有）
|
||
|
||
## 技术架构
|
||
|
||
### 实现方案
|
||
|
||
使用 ffmpeg.wasm 在浏览器端完成视频合成，无需后端服务：
|
||
|
||
```mermaid
|
||
flowchart LR
|
||
A[slides数据] --> B[下载图片/音频]
|
||
B --> C[写入FFmpeg虚拟文件系统]
|
||
C --> D[生成视频片段]
|
||
D --> E[合并所有片段]
|
||
E --> F[输出MP4视频]
|
||
F --> G[预览/下载]
|
||
```
|
||
|
||
### 核心流程
|
||
|
||
1. **资源准备阶段**：遍历 slides 数组，fetch 所有图片和音频到内存
|
||
2. **文件系统写入**：将资源写入 ffmpeg.wasm 的虚拟文件系统
|
||
3. **片段生成**：每个 slide 生成一个视频片段（图片+音频）
|
||
4. **视频合并**：使用 concat demuxer 将所有片段合并为完整视频
|
||
5. **输出展示**：生成 Blob URL 用于预览和下载
|
||
|
||
### 性能考量
|
||
|
||
- 音频时长检测：需要预先获取每个音频时长，用于视频片段时长控制
|
||
- 内存管理：大文件处理时注意释放内存
|
||
- 进度反馈：通过 ffmpeg 日志解析当前进度
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
src/
|
||
├── views/
|
||
│ └── QuestionExplanation.vue # [MODIFY] 添加视频合成功能
|
||
├── utils/
|
||
│ └── videoComposer.js # [NEW] ffmpeg.wasm 封装模块
|
||
└── config/
|
||
└── index.js # [MODIFY] 添加视频相关配置
|
||
```
|
||
|
||
## 实现要点
|
||
|
||
### videoComposer.js 核心接口
|
||
|
||
- `initFFmpeg()`: 初始化并加载 ffmpeg.wasm
|
||
- `composeVideo(slides, onProgress)`: 主合成函数，返回视频 Blob
|
||
- `downloadVideo(blob, filename)`: 触发下载
|
||
- `getAudioDuration(audioUrl)`: 获取音频时长
|
||
|
||
### 状态管理
|
||
|
||
新增状态：
|
||
|
||
- `videoStatus`: idle | preparing | composing | ready | error
|
||
- `videoProgress`: { stage: string, current: number, total: number, message: string }
|
||
- `videoBlobUrl`: 合成完成的视频 URL
|
||
|
||
## 设计说明
|
||
|
||
在现有播放器界面基础上，新增视频合成功能区，位于播放控制区域下方。采用深色主题风格与现有界面保持一致。
|
||
|
||
## 新增区块
|
||
|
||
1. **视频合成按钮区**：在播放控制区底部添加"生成视频"按钮
|
||
2. **进度显示区**：合成过程中显示分步骤进度条和当前状态描述
|
||
3. **视频预览区**：合成完成后显示视频播放器和下载按钮 |