龙虾制作全自动知识讲解视频生成器的skills🎬 Web Presentation Video v2.0 📖 目录

🎬 Web Presentation Video v2.0

全自动知识讲解视频生成器 — 输入知识内容，一键输出专业讲解视频（1280×720 MP4）

📖 目录

功能概览
快速开始
安装与依赖
使用方法
脚本JSON格式
22种幻灯片主题
配音音色推荐
工作流程详解
输出文件结构
常见问题排查
性能参考

功能概览

✨ 核心能力

功能	说明
📝 脚本解析	支持 JSON / Markdown / 主题提示三种输入方式
🎨 HTML幻灯片	自动生成封面/内容/结尾三种模板
🗣️ AI配音	微软 edge-tts 在线语音合成，支持中英文多音色
📸 自动截图	html2image (Chrome Headless) 高清截图 1280×720
📄 字幕生成	自动生成 SRT 字幕文件（独立输出）
🎬 视频合成	ffmpeg 编码 + 拼接 + 可选 BGM 混音
🎭 22种主题	从清新到赛博朋克，覆盖主流视频风格

v2.0 vs v1.x 对比

功能	v1.x	v2.0
端到端流程	❌ 需手动截图+合成	✅ 一条命令完成全部
截图方式	Browser工具（受限）	✅ html2image 内置
视频合成	❌ 手动ffmpeg命令	✅ 自动编码+拼接+BGM+字幕
幻灯片主题	3种通用模板	✅ 22种主题 + 封面/结尾专用模板
edge-tts容错	无重试	✅ 3次自动重试 + 断点续传
字幕支持	不支持	✅ SRT自动生成（独立文件）
背景音乐	不支持	✅ BGM混音（amix滤镜）

快速开始

最简用法：已有脚本JSON → 视频

python scripts/auto_knowledge_video.py --script tutorial.json

一条命令完成：HTML幻灯片 → AI配音 → 截图 → 字幕 → 视频输出

完整参数示例

python scripts/auto_knowledge_video.py \
    --script tutorial.json \
    --style cyberpunk \
    --voice zh-CN-YunxiNeural \
    --music bgm.mp3 \
    --output "我的视频.mp4" \
    --work-dir ./output

从 Markdown 文件生成

python scripts/auto_knowledge_video.py \
    --input notes.md \
    --style ocean \
    --voice zh-CN-XiaoxiaoNeural

安装与依赖

必需依赖

依赖	版本要求	用途	安装命令
Python	3.8+	运行环境	已有 Python 3.12 ✅
ffmpeg	5.0+	视频编码/合成	已安装 v8.1.1 ✅
edge-tts	最新版	AI语音合成	`pip install edge-tts` ✅
html2image	最新版	HTML→PNG截图	`pip install html2image` ✅
jinja2	最新版	HTML模板渲染	`pip install jinja2` ✅

一键安装所有依赖

pip install edge-tts html2image jinja2

ffmpeg 配置

ffmpeg 便携版已安装在：

C:\Users\admin\bin\ffmpeg\bin\

并已加入系统 PATH。

使用方法

命令行参数

参数	默认值	说明
`--script`	-	推荐结构化脚本JSON文件路径
`--input`	-	输入文本/Markdown文件路径
`--topic`	-	知识主题（需先手动生成JSON）
`--slides`	`5`	幻灯片数量（仅--topic模式有效）
`--voice`	`zh-CN-XiaoxiaoNeural`	AI配音音色
`--style`	`modern`	幻灯片样式主题（22种可选）
`--music`	-	背景音乐文件路径（可选）
`--output` / `-o`	`{title}.mp4`	输出视频路径
`--work-dir`	`{title}_vid`	工作目录（存放中间文件）
`--no-subtitle`	False	不生成字幕文件

脚本JSON格式

基本结构

{
  "title": "视频总标题",
  "slides": [
    {
      "title": "幻灯片标题",
      "subtitle": "副标题（可选，封面/结尾模板显示）",
      "bullets": ["要点1", "要点2", "要点3"],
      "narration": "这段文字会作为AI配音的文本。"
    }
  ]
}

字段说明

顶层字段

字段	类型	必填	说明
`title`	string	✅	视频总标题，也用作默认输出文件名
`slides`	array	✅	幻灯片数组

单张幻灯片字段

字段	类型	必填	默认值	说明
`title`	string	✅	-	页面大标题
`subtitle`	string	❌	""	副标题（封面/结尾模板中使用）
`bullets`	string[]	❌	[]	要点列表（内容页显示为列表项）
`narration`	string	❌	""	AI配音文本（为空则从title+bullets合成）
`slide_num`	int	❌	自动编号	序号（可省略，系统自动分配）

模板自动识别规则

系统根据位置和关键词自动选择模板：

📑 封面模板 (Cover)

位置：第1张幻灯片
触发条件（满足任一）：
- bullets 数量 ≤ 1
- 标题包含："什么是"、"介绍"、"Introduction"、"Overview"
效果：大标题居中(72px) + 副标题(28px) + 装饰emoji

📝 内容模板 (Content)

位置：中间的幻灯片
效果：左对齐标题(44px) + 彩色分割线 + 要点列表(26px) + 右上角页码

🏁 结尾模板 (Ending)

位置：最后一张幻灯片
触发条件（满足任一）：
- 标题包含："感谢"、"谢谢"、"总结"、"结束"、"Thank"、"Summary"、"观看"、"Thanks"、"结语"
效果：居中大字(64px) + 分隔线 + 副标题

💡 提示：如果一张幻灯片没有 bullets 但有较长的 narration，系统会自动截取 narration 前250字作为页面文字显示。

完整示例：5页教程

{
  "title": "Python入门教程",
  "slides": [
    {
      "title": "什么是Python",
      "subtitle": "一门优雅而强大的编程语言",
      "narration": "Python是一门由Guido van Rossum于1991年创建的高级编程语言。它以简洁易读的语法著称，被广泛应用于Web开发、数据分析、人工智能等领域。"
    },
    {
      "title": "Python的核心优势",
      "bullets": [
        "语法简洁，学习曲线平缓",
        "丰富的第三方库生态",
        "跨平台运行（Windows/Mac/Linux）",
        "活跃的社区支持"
      ],
      "narration": "Python的核心优势首先在于它的简洁性。相比其他编程语言，Python用更少的代码就能完成同样的任务。其次，Python拥有超过40万个第三方包，几乎能找到任何你需要的功能库。"
    },
    {
      "title": "开发环境搭建",
      "bullets": [
        "第一步：下载并安装Python",
        "第二步：配置环境变量",
        "第三步：安装代码编辑器（VS Code推荐）",
        "第四步：验证安装：python --version"
      ],
      "narration": "开始Python开发的第一步是安装Python解释器。访问python.org下载最新版本。安装时务必勾选'Add Python to PATH'选项。然后推荐安装VS Code编辑器，并安装Python扩展插件。"
    },
    {
      "title": "第一个程序：Hello World",
      "bullets": [
        "打开终端或命令行",
        "输入 python 进入交互模式",
        "输入 print('Hello, World!') 并回车",
        "看到输出结果！"
      ],
      "narration": "让我们来写第一个Python程序。打开终端，输入python进入Python交互模式。然后输入print括号引号Hello World感叹号引号括号，按回车键。屏幕上就会显示出 Hello, World! 这行文字。恭喜你，你已经写了第一个Python程序！"
    },
    {
      "title": "总结",
      "subtitle": "开启你的Python之旅 🐍",
      "narration": "今天我们学习了什么是Python、它的核心优势、如何搭建开发环境，以及编写了第一个程序。Python的世界非常精彩，接下来你可以尝试学习变量、函数、循环等更多概念。感谢观看！"
    }
  ]
}

22种幻灯片主题

🎨 主题总览表

#	主题	风格	背景渐变	强调色	适用场景
1	modern	现代渐变	紫→深蓝	金色🚀	通用/科技
2	minimal	极简白底	白→浅灰	紫色✨	商务/正式
3	tech	科技深色	深蓝黑→蓝灰	青色⚡	科技/游戏
4	warm	温暖粉红	暖白→橙粉	橙红🔥	生活/情感
5	ocean	海洋清新	浅青→淡青	深蓝🌊	教育/科普
6	forest	自然森林	浅绿→淡绿	绿色🌿	环保/健康
7	sunset	日落暖阳	米黄→浅黄	琥珀🌅	温馨/日常
8	cyberpunk	赛博朋克	深紫黑→暗紫	亮粉🤖	游戏/潮流
9	neon	霓虹灯	纯黑→暗紫	荧光绿🎆	夜店/炫酷
10	purple	紫罗兰	深紫→青绿渐变	亮紫🍇	时尚/B站
11	fire	火焰	暗红→深红	橙红🔥	热血/游戏
12	ice	冰雪	浅蓝白→冰蓝	深蓝❄️	清新/冷调
13	gold	黑金	暗金→金棕	金黄🌟	高端/商务
14	rose	玫瑰粉	粉白→浅粉红	玫瑰红🌹	美妆/女性
15	midnight	深夜蓝	极深蓝→深蓝	天蓝🌙	悬疑/科技
16	candy	糖果	粉白→浅粉	粉红🍭	少女/可爱
17	military	军事风	暗绿→军绿	荧光绿🎯	硬核/战术
18	coffee	咖啡	深棕→暗棕	琥珀☕	商务/沉稳
19	lavender	薰衣草	淡紫→浅紫	紫色💜	文艺/治愈
20	blood	血红	暗红→血红	鲜红💀	恐怖/刺激
21	aurora	极光	深青→墨绿	薄荷🌌	自然/科普
22	peach	蜜桃	暖白→橙白	橙色🍑	美食/温馨

使用示例

# 赛博朋克风格（抖音爆款）
python auto_knowledge_video.py --script data.json --style cyberpunk

# 清新海洋风格（教育类首选）
python auto_knowledge_video.py --script data.json --style ocean

# 高端黑金风格（商业演示）
python auto_knowledge_video.py --script data.json --style gold

自定义主题

在脚本的 STYLE_THEMES 字典中添加即可：

STYLE_THEMES["mytheme"] = {
    "bg_start": "#FF0000",      # 渐变起始色
    "bg_end": "#0000FF",        # 渐变结束色
    "accent": "#FFFF00",        # 强调色（分割线/圆点/标题）
    "decorator": "\u2728"       # 封面装饰emoji
}

然后使用 --style mytheme 即可。

配音音色推荐

中文音色

音色	性别	风格	推荐场景
`zh-CN-XiaoxiaoNeural`	女	年轻、亲和力强	默认推荐，通用讲解
`zh-CN-YunxiNeural`	男	年轻、沉稳	科技/知识类（男声）
`zh-CN-YunyangNeural`	男	成熟、权威	正式/纪录片风格
`zh-CN-XiaoyiNeural`	女	温柔、亲切	情感/生活类
`zh-CN-XiaochenNeural`	男	活泼、新闻播报	新闻/资讯类

英文音色

音色	性别	风格
`en-US-JennyNeural`	女	标准、清晰
`en-US-GuyNeural`	男	成熟、沉稳
`en-US-AriaNeural`	女	自然、流畅

查看完整音色列表

edge-tts --list-voices

工作流程详解

六步流水线

┌─────────────┐
│  Step 1     │  解析输入（JSON/MD/Topic）
│  脚本解析   │  → 标准化 script dict
└──────┬──────┘
       ↓
┌─────────────┐
│  Step 2     │  根据主题配色渲染HTML模板
│  HTML生成   │  → N个 slide_XXX.html
└──────┬──────┘
       ↓
┌─────────────┐
│  Step 3     │  edge-tts 在线TTS（自动重试3次）
│  AI配音     │  → N个 voice_XXX.mp3
│             │  → ffprobe 获取时长
└──────┬──────┘
       ↓
┌─────────────┐
│  Step 4     │  Chrome Headless 截图
│  截图       │  → N个 slide_XXX.png (1280×720)
└──────┬──────┘
       ↓
┌─────────────┐
│  Step 5     │  根据配音文本+时长生成时间轴
│  字幕生成   │  → subtitles.srt（独立文件）
└──────┬──────┘
       ↓
┌─────────────┐
│  Step 6     │  ┌─ 6A: 图片+音频 → N个MP4片段
│  视频合成   │  ├─ 6B: concat无损拼接
│             │  ├─ 6C: BGM混音（可选）
│             │  └─ 6D: 输出最终MP4
└──────┬──────┘
       ↓
  🎬 最终视频.mp4 ✅

各步骤详细说明

Step 1: 脚本解析

JSON模式：直接 json.load() 解析
Markdown模式：按 # 标题 分页，- 要点 提取列表
Topic模式：提示用户需要先生成JSON脚本

Step 2: HTML 幻灯片生成

渲染引擎：Jinja2（优先），降级为字符串替换
分辨率：1280×720 固定
字体栈：Microsoft YaHei, PingFang SC, Arial, sans-serif
模板选择：根据位置和关键词自动判断（见脚本格式）

Step 3: AI 配音生成

引擎：微软 edge-tts（免费在线TTS）
容错机制：
- ✅ 跳过已存在且 >500 bytes 的文件（断点续传）
- ✅ 失败自动重试3次，每次间隔1秒
- ✅ narration 为空时从 title+bullets 合成
时长获取：ffprobe 解析音频 duration

Step 4: 截图

引擎：html2image（基于 Chrome Headless）
分辨率：1280×720 PNG
注意：避免在CSS中使用 opacity 动画（html2image可能捕获初始状态）

Step 5: 字幕生成

格式：SRT（SubRip）
规则：
- 每段配音对应一条字幕
- 长文本按句号/逗号分行（每行≤20字）
- 时间轴连续排列
输出：独立 SRT 文件（不烧录到视频）

Step 6: 视频合成

6A. 片段编码（每个幻灯片独立编码）：

ffmpeg -loop 1 -i slide.png -i voice.mp3 
       -c:v libx264 -tune stillimage -preset medium
       -c:a aac -b:a 192k -pix_fmt yuv420p -shortest seg_XXX.mp4

6B. 拼接（concat demuxer 无损拼接）：

ffmpeg -f concat -safe 0 -i concat.txt -c copy temp.mp4

6C. BGM混音（可选，amix滤镜）：

ffmpeg -i temp.mp4 -i bgm.mp3
       -filter_complex "[0:a][1:a]amix=inputs=2:duration=first:dropout_transition=2[aout]"
       -map 0:v -map "[aout]" final.mp4

输出文件结构

运行后工作目录结构：

{work_dir}/                          # 工作目录
├── html/                            # HTML 幻灯片源文件
│   ├── slide_001.html               # 封面
│   ├── slide_002.html               # 内容页
│   ├── slide_003.html               # ...
│   └── slide_0NN.html               # 结尾
├── audio/                           # AI 配音 MP3 文件
│   ├── voice_001.mp3                # 第1段配音
│   ├── voice_002.mp3                # ...
│   └── voice_0NN.mp3
├── images/                          # PNG 截图（1280×720）
│   ├── slide_001.png
│   ├── slide_002.png
│   └── slide_0NN.png
├── segments/                        # ffmpeg 中间片段
│   ├── seg_001.mp4
│   ├── seg_002.mp4
│   └── seg_0NN.mp4
├── subtitles.srt                    # 📄 SRT字幕文件（独立输出）
├── manifest.json                    # 清单文件（元数据）
└── {title}.mp4                      # 🎬 最终视频输出

常见问题排查

1. edge-tts 配音失败 (`NoAudioReceived`)

原因：特殊字符（%等）、过长文本
解决：v2.0 已内置3次重试；避免使用 % 改为"百分之XX"

2. html2image 截图空白/全白

原因：Chrome版本过低或未正确初始化

解决：

pip uninstall html2image && pip install html2image

3. ffmpeg 找不到命令

确认PATH：确保 C:\Users\admin\bin\ffmpeg\bin 在系统PATH中
测试：在终端执行 ffmpeg -version

4. PowerShell 中文乱码

解决：

$env:PYTHONIOENCODING="utf-8"
python scripts/auto_knowledge_video.py ...

5. Jinja2 未安装（HTML含原始标记 `{{ }}`）

解决：pip install jinja2
降级：v2.0 有字符串替换方案作为备选

6. 进程被 SIGKILL 终止（OOM）

原因：同时处理过多配音或截图
解决：
- 减少幻灯片数量（分批生成）
- 利用"跳过已有文件"机制断点续传

7. 视频大小异常

参考值：10页 ≈ 3-5分钟 ≈ 4-7 MB (1280×720)
过大：检查是否有重复编码
过小：检查音频是否正常生成

8. CSS动画导致截图文字半透明

根因：html2image 截图时 opacity 动画未执行完
解决：不要在幻灯片CSS中使用 animation + opacity 组合

性能参考

视频规模	幻灯片数	预计耗时	预计大小	适用平台
🔥 短视频	5-10页	2-5分钟	2-5 MB	抖音/小红书
📹 中等视频	10-20页	5-10分钟	5-10 MB	B站/YouTube
🎞️ 长视频	20-30页	10-20分钟	10-20 MB	知识付费

⚠️ 以上时间为参考值，实际取决于网络速度（edge-tts在线请求）和机器性能。

文档	路径	内容
脚本格式详情	`references/script-format.md`	JSON字段规范+模板规则
样式自定义	`references/slide-styles.md`	主题配色+CSS架构
工作流程	`references/workflow.md`	技术实现细节
故障排查	`references/troubleshooting.md`	错误码+解决方案

版本历史

版本	日期	更新内容
v2.0	2026-05-12	端到端自动化、html2image截图、22种主题、BGM混音、字幕生成
v1.0	2026-05-11	初始版本，基础HTML生成+手动截图合成

📌 Web Presentation Video Skill — 让知识视频制作像发朋友圈一样简单

龙虾制作全自动知识讲解视频生成器的skills