AI.Demo/.codebuddy/plans/试题讲解视频生成功能开发_c0649647.md

name	overview	design	todos
试题讲解视频生成功能开发	在 QuestionExplanation.vue 页面添加视频生成功能，将已生成的图片和音频合成为完整视频，支持在线预览、下载，并显示详细的生成进度。	architecture styleKeywords fontSystem colorSystem framework vue Dark Theme Glassmorphism Minimalist fontFamily heading subheading body PingFang SC size weight 1.25rem 600 size weight 1rem 500 size weight 0.875rem 400 primary background text functional #8b5cf6 #3b82f6 #0f172a #1e293b #ffffff rgba(255,255,255,0.6) #22c55e #ef4444	id content status create-composer 创建 videoComposer.js 封装 ffmpeg.wasm 合成逻辑 completed id content status add-video-config 在 config/index.js 添加视频相关配置 completed id content status dependencies implement-compose-ui 在 QuestionExplanation.vue 添加合成按钮和进度显示 completed create-composer add-video-config id content status dependencies implement-preview-download 实现视频预览和下载功能 completed implement-compose-ui id content status dependencies integrate-workflow 整合视频合成到现有生成流程 completed implement-preview-download

产品概述

在现有试题讲解页面基础上，新增视频合成功能，将已生成的图片和音频合成为完整的教学讲解视频。

核心功能

• 将多个讲解点的图片和音频按顺序合成为单一视频文件
• 视频生成过程中显示详细进度（资源下载、片段合成、视频编码等步骤）
• 支持在线预览生成的视频
• 支持下载视频到本地

技术栈

• 视频合成：ffmpeg.wasm（已安装 @ffmpeg/ffmpeg@0.12.15）
• 现有框架：Vue 3 + Vite
• HTTP 请求：axios（已有）

技术架构

实现方案

使用 ffmpeg.wasm 在浏览器端完成视频合成，无需后端服务：

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. 视频预览区：合成完成后显示视频播放器和下载按钮