# 视频剪辑工具 (Video Editor)

纯前端在线视频剪辑与文案生成视频工具。所有处理在浏览器本地完成，零网络上传，无需下载任何软件。

## 项目概述

- **名称**: 视频剪辑工具 (Video Editor)
- **类型**: Web Application (纯前端 SPA)
- **技术栈**: Vite 8, FFmpeg.wasm (WebAssembly), Canvas API, MediaRecorder, Web Audio API
- **语言**: 中文 (zh-CN) / English (en)
- **URL**: https://video.tryquicktoolbox.com

## 功能模块

### 📹 视频剪辑 (Tab 1)

| 功能 | 说明 |
|------|------|
| 多轨道时间轴 | 拖拽添加多个视频文件，每轨道独立色条和片段 |
| 分割 | 播放头位置一键切分当前片段 |
| 裁剪比例 | 原始 / 16:9 / 9:16 / 1:1 / 4:3 |
| 旋转 | 0° / 90° / 180° / 270° |
| 翻转 | 水平 / 垂直 |
| 倍速 | 0.5x ~ 3x 无极滑块 |
| 静音/音量 | 静音开关，音量 0% ~ 200% |
| 替换BGM | 上传音频文件替换原音轨 |
| 输出模式 | 视频+音频 / 仅视频 / 仅音频 |
| 导出格式 | MP4 (h264 + aac) |

### 📝 文案生成视频 (Tab 2)

| 功能 | 说明 |
|------|------|
| 文本输入 | 每行 = 一个场景，自动计算时长 |
| 动画效果 | 淡入淡出 / 打字机 / 滑入 / 无动画 |
| 画面样式 | 双色渐变背景 / 背景图片 / 字号 / 字重 / 文字颜色 |
| 视频尺寸 | 横屏 16:9 / 竖屏 9:16 / 方形 1:1 |
| 打字音效 | AudioContext 合成双击声，录制到视频音轨 |
| 导出格式 | Canvas → MediaRecorder WebM → ffmpeg 转 MP4 |

## 技术架构

- **视频处理**: FFmpeg.wasm (WebAssembly)，多滤镜链式处理
- **视频编码**: Canvas API + MediaRecorder
- **音频合成**: Web Audio API (OscillatorNode)
- **多语言**: 自研 i18n 模块，localStorage 持久化
- **构建**: Vite 8, target: esnext

## 导出流程

### 视频剪辑导出
多源 tracks[] → 拍平为 clips[{file, start, end}] → 按源文件去重 → 逐 clip 提取（+ 裁剪/旋转/翻转/倍速/音量滤镜）→ concat demuxer 合并 → MP4 (libx264 + aac)

### 文案视频导出
Canvas requestAnimationFrame 逐帧渲染 → canvas.captureStream(30fps) → AudioContext 捕获打字音效 → 合并 Video + Audio 流 → MediaRecorder → WebM → ffmpeg.wasm 转码 → MP4

## 架构原则

- **零网络上传**: FileReader / URL.createObjectURL / Blob 下载
- **纯前端**: 无后端服务，所有数据停留在浏览器
- **无第三方 UI 框架**: Vanilla JS + 自研 i18n
- **暗色主题**: 纯 CSS 变量驱动，响应式适配移动端

## 页面路由

| 路径 | 说明 |
|------|------|
| / | 主页面，包含视频剪辑和文案生成视频两个 Tab |

## 静态资源

- /robots.txt - 搜索引擎爬虫规则
- /sitemap.xml - 站点地图
- /llms.txt - 本文件，AI/LLM 智能体友好索引