html-edge-tts-video: 用AI创建有声视频

现在刷短视频，刷B站，太多由AI生成的科普介绍类型的视频, 我自己也体验了一些比如说hyperFame等等这些。实话实说，这些对非代码的开发者来说还是有一定门槛的，我呢做了一个叫 html-edge-tts-video 的开源项目快速地把网页变成视频 , 当然，我也想到，创造视频可能是第一步, 所以这个工具呢，还花了很大的心血支持对视频的二次编辑。

现在这个类型的工具这个工具非常多，希望大家可以体验一下尝试一下，给点建议

还是老样子，我自己做的东西总是开源的哈哈源码和一些直接上手的东西记在这里了 github.com/pldz1/html-... gitee.com/pldz/html-e...
网页的预览可以访问这个地址 pldz1.com/io/html2vid...

从我个人的角度，认为用web打开挺好用的。欢迎大家star,fork然后本地体验吧哈哈哈

我自己用它创作出来第一个视频上传在了B站上，大家有兴趣的话也可以看一看，视频的内容是花了不少心血去收集整理的

点击封面前往 B 站观看

👉👉 下面的内容是一些对项目的介绍了，由AI辅助完成，感兴趣的可以随着他一起去看一下，但是我还是建议大家直接去把项目跑起来玩一下

场景

项目要解决的问题比较直接：现在用 Code Agent 或者网页端 AI 生成 HTML 已经很方便了，但生成出来的内容通常只能作为网页展示。要把这些页面做成带旁白、字幕和转场的视频，还需要处理语音、录屏、时间轴、字幕同步以及视频编码等一系列工作。

这个项目就是把后面的这些步骤尽量自动化。

简单来说，只需要让 AI 生成 HTML 页面和对应的旁白内容，剩下的语音合成、画面播放、字幕同步和 MP4 导出，都可以交给项目完成。

整体思路

一个视频项目主要由两个文件组成：

scenes.json
body.html

scenes.json 用来管理场景顺序、章节名称和每个场景的旁白。

body.html 用来管理真正显示在视频里的内容，包括标题、文字、颜色、排版、图表、SVG、动画和其他视觉元素。

这样拆分以后，内容和画面会比较清楚。AI 不需要理解复杂的视频编辑工程，只需要按照要求生成这两个文件。项目内部的稳定运行层会负责时间轴、字幕、播放控制、场景切换以及最终的视频渲染。

可以配合 Code Agent 使用

比较推荐的一种方式，是直接把项目交给 Code Agent。

仓库里已经准备了 SKILL.md 和相关说明文件。支持读取项目文件的 Code Agent，可以根据主题直接创建 scenes.json 和 body.html，然后继续执行配音、检查和视频渲染。

比如要做一个产品介绍视频、技术原理讲解、教程视频或者数据报告，只需要说明视频主题、受众、语言和大概结构，Agent 就可以在项目目录里完成 HTML 内容的生成。

这种方式比较适合平时已经在使用 Codex、Claude Code、GitHub Copilot 或其他代码 Agent 的用户。

也可以配合网页端 AI 使用

没有 Code Agent 也没关系，普通的网页端 AI 对话同样可以完成。

项目提供了专门的提示词生成功能：

bash 复制代码

python main.py prompt --topic "介绍一个新产品" --language zh-CN

执行以后，会生成一份适合复制到网页端 AI 的完整提示词。把提示词发送给常用的 Web AI，让它返回 scenes.json 和 body.html，再把结果导入项目即可。

选择平时可以免费使用的 Web AI，整个生成过程基本可以零成本跑通。语音部分使用的是 Edge TTS，不需要另外购买商业语音 API，也不需要配置 API Key。

换句话说，只要本地有 Python 环境，就可以从一个主题开始，一路生成 HTML、旁白、字幕和最终视频。

提供了网页操作界面

虽然这是一个 Python 项目，但不需要一直在命令行里操作。

项目提供了一个 Studio 网页界面，可以在浏览器里管理视频项目，包括：

创建新项目
生成 Web AI 提示词
导入 AI 返回的 HTML 和场景数据
切换和管理多个项目
检查项目文件
预览视频效果
选择和试听语音
生成旁白
调整字幕
设置视频清晰度
导出 MP4 视频

新建项目时可以选择 16:9 横屏或者 9:16 竖屏。横屏比较适合教程、演示和知识分享，竖屏则比较适合短视频平台。视频方向会在项目创建时确定，导出时会自动匹配对应的分辨率。

技术上是怎么实现的

项目主要使用 Python 开发，依赖并不算多：

text 复制代码

edge-tts
imageio-ffmpeg
playwright

其中：

edge-tts 负责把每个场景的旁白转换成语音，同时获取单词边界信息，用来处理字幕和语音时间轴。

Playwright 负责在无界面的 Chromium 浏览器中加载 HTML 页面，并按照视频时间轴渲染对应的场景。

imageio-ffmpeg 提供 FFmpeg，用来处理音频拼接、画面编码以及最终的 MP4 合成。项目使用自己管理的 Chromium Headless Shell 和 FFmpeg，不依赖系统中已经安装的浏览器或 FFmpeg。

整个流程大概是这样：

text 复制代码

scenes.json + body.html
        ↓
Edge TTS 生成旁白和时间轴
        ↓
浏览器加载并渲染 HTML
        ↓
按照时间轴切换场景和字幕
        ↓
imageio-ffmpeg 合成音频和画面
        ↓
输出 MP4 视频

这种方式的一个好处是，画面本质上还是 HTML、CSS 和 SVG。

网页能实现的排版、卡片、渐变、图表和简单动画，基本都可以放进视频里。比起传统的视频模板，HTML 的修改成本更低，也更适合让 AI 自动生成。

安装和运行

先克隆代码仓库：

bash 复制代码

git clone https://github.com/pldz1/html-edge-tts-video.git
cd html-edge-tts-video

然后执行安装命令：

bash 复制代码

python main.py install

这个命令会安装 Python 依赖、imageio-ffmpeg 以及 Playwright 使用的 Chromium Headless Shell。

安装完成后启动 Studio：

bash 复制代码

python main.py studio

默认服务地址是：

text 复制代码

http://127.0.0.1:8765/studio

打开浏览器以后，就可以通过网页界面创建项目、导入 AI 生成的内容、选择语音并输出视频。

也可以完全通过命令行运行：

bash 复制代码

python main.py init --target .local/work/my-video

python main.py tts \
  --source .local/work/my-video

python main.py check \
  --source .local/work/my-video

python main.py render \
  --source .local/work/my-video \
  --size 720p \
  --output my-video.mp4

最终生成的视频会保存在当前项目的 output 目录中。项目还支持从 480p 到 4K 的多种分辨率、帧率设置、画面质量设置以及场景转场时间调整。

适合用来做什么

目前比较适合的使用场景包括：

产品和开源项目介绍
编程知识讲解
教程类视频
数据报告和图表展示
课程内容
PPT 风格的演示视频
短视频知识分享
博客内容的视频化
AI 自动生成的视频内容

尤其适合那些不需要真人出镜，主要依靠文字、图表、卡片、流程图和旁白来表达内容的视频。

画面直接使用 HTML 描述以后，修改文字、调整布局或者更换视觉风格都比较方便。需要批量生产同类型视频时，也可以让 Code Agent 直接复制项目结构并生成新的内容。