html-video这个开源项目其实发布有段时间了，作者是熟悉的Open Design团队，之前他们也推出过Claude Design的平替工具Open Design。

没有了解过的小伙伴可以回看老马的往期文章：小白也能搞定专业设计，开源版Claude Design用起来

之所以现在才给大家介绍html-video，主要是因为html-video在Windows系统下存在一些bug，识别不到本地已经安装的Agent。

老马不像很多AI博主，测都不测，拿github仓库的介绍用AI生成文章就开始发布吹嘘了，有些则在Mac上跑一下，没有在Windows系统上跑过。

应该说，开源项目存在一些兼容性是正常的，尤其是Windows系统，因此老马给Open Design团队提了issue，反馈了多次，半个月后总算是修复了。

在此也啰嗦一句，有条件的小伙伴能用Macbook来学习和使用AI是最好的，因为市面上很多工具都是在Mac系统环境下开发。

至于Windows，往往都是最后一个发布软件版本，不论是个人开发者，还是大厂，可以参考豆包输入法，Windows版本都快半年了还没发布。

可见这里面到底是有多少兼容性问题需要处理，还是开发团队已经折腾到进入想摆烂的状态了。

啰嗦完毕，一句话介绍一下html-video这款开源工具。连接上本地的AI Agent后，告诉它想做什么视频，它就帮你把网页代码变成一段真正的 MP4动画视频，还能配背景音乐、旁白字幕和人声解说。

平时我们想做个带动画的短视频，比如数据图表动态展示、产品宣传卡点视频、或者把一篇干货文章变成视频发抖音。通常得学PR、AE这种专业软件，要么最低要求你得会剪映。

html-video换了一种思路，你不用去操作复杂的视频软件，而是直接跟AI聊天，告诉它我要把这篇文章做成视频，或者帮我做个这样的动画，它就自动给你生成好。底层用的是网页技术（HTML/CSS），但你完全不用懂代码。

html-video的整个操作流程大致可以分为三个步骤：

第一步：你给它原料

比如一段描述、一篇文章的链接（微信公众号文章也行）、或者一个GitHub代码仓库地址等等。

第二步：AI Agent帮你做故事板

工具会把你给的内容喂给AI编程助手（支持Claude、Cursor、Gemini等十几种主流工具，哪个顺手用哪个），AI帮你规划视频有几帧、每帧演什么、动效怎么衔接。

第三步：自动渲染出片

系统在后台用浏览器把所有动画一帧帧录下来，再用ffmpeg拼成完整的 MP4视频，输出保存到你电脑上。

html-video内置了21个现成模板，风格覆盖挺广，比如有纽约时报那种高级感的数据图表、炫酷的故障风标题、极光渐变的背景、电影质感的胶片颗粒效果、打字机特效，还有简洁的片尾Logo卡。每个模板都是合规的，商用也没问题。

支持AI配音和背景音乐， 接入了MiniMax的API后，你可以用大白话描述给我来一段轻松愉快的背景音乐，或者输入文字让它自动生成语音旁白。导出的时候，人声和背景乐的音量会自动调好，还带淡入淡出。

全程本地，隐私安全，从AI生成到渲染出片，所有操作都在你自己电脑上完成，视频内容不上传到任何云端，不用担心敏感内容泄露，也没有按次收费这一说。兼容性强，不绑定一家AI。

支持14种编程AI助手，包括Claude Code、Cursor、Gemini CLI、GitHub Copilot等等，在界面上一键切换即可。

基本的功能特性介绍就是这些，下面老马将实际演示一下部署和使用，还是以Windows 11系统为例，Mac系统的操作是差不多。

html-video的github开源地址如下，老规矩，访问不了github下载不了项目代码的，可以给老马的公众号发送“github工具”获取方法：

github.com/nexu-io/html-video

访问github仓库后，右上角点击绿色的“code”按钮，选择“Download ZIP”把项目代码打包下载到电脑桌面即可：

下载完ZIP压缩包，解压成文件夹，留着待会备用。

html-video的部署与使用

首先你电脑上得提前安装好Node.js环境，没有安装的小伙伴可以访问nodejs.org/zh-cn/download去下载安装，版本一定要20以上的：

其次，你电脑上还得提前装过一些AI Agent，比如Windsurf CLI、Trae CLI、Claude Code、Cursor Agent、Codex CLI、Gemini CLI、Grok Build、Qwen Code、OpenCode、GitHub Copilot CLI、Aider、Hermes、Anthropic Messages API这些。

如果你没装过以上任意一个Agent，那老马建议你去微信搜一下相关的公众号文章教程，或者问豆包和千问，自己先装一个。

这里推荐安装Qwen Code、OpenCode这两个，你配置起来没那么麻烦。因为html-video是不带Agent的，它只会去调用你本地已经装好的Agent，所以你得提前安装好。

以上准备工具完毕，接下来我们打开已经解压好的html-video项目代码文件夹，右键选择在终端打开：

打开后，第一步在命令行窗口先运行以下命令，安装Playwright的无头Chromium：

npx playwright install chromium

安装完毕后，接下来继续输入下面的命令进行第二步的安装：

pnpm install

安装完毕后，接下来我们需要修改一个文件，如果你是Mac系统，这一步可以跳过，直接看下一步的构建。Windows系统的话必须修改文件，否则下一步的构建会报错。

我们在项目代码文件夹找到\packages\cli路径下的package.json文件，使用记事本之类的工具打开进行编辑，找到下面这行代码：

"build": "tsc -p tsconfig.json && chmod +x dist/bin.js"

把括号里面的内容修改掉，改完后代码如下：

"build": "tsc -p tsconfig.json"

然后保存package.json文件，这样就可以继续在命令行窗口，运行下面的构建命令了：

pnpm -r build

构建完成，接下来我们就可以启动一下html-video，输入以下命令：

node packages/cli/dist/bin.js studio

启动完成，会显示一个本地的网址127.0.0.1:3071，你在浏览器中打开这个网址，就能看到html-video的工作台界面了：

在工作台界面中，右上角的齿轮按钮，默认就是设置的意思，这个大家得记牢，点开可以把界面的语言设置成中文。

顶部的菜单点开，可以看到html-video已经识别出来老马本地电脑上，已经安装好的各种AI Agent，图标跟文字都是右侧有一个绿色可用状态的。

我们继续回到设置页面，点开后可以看到Agent的列表，即你本地已经安装好，被识别出来的Agent，每个Agent你都可以点击测试一下，看看哪个可以正常使用：

切换到音频设置，这里默认是支持接入MiniMax的API，你可以调用MiniMax的模型去生成背景音乐和人声配音。至于如何获取MiniMax的API，你访问它的官网就可以了：

MiniMax的模型API平台，新用户注册是会送15块代金券的，等于是免费额度，老马因此就得以接入测试一下，不然的话还得另外充值才能用。

关掉设置页面，回到工作台的首页，顶部菜单我们还可以看到选择模版的地方，这里你可以打开看看内置的模版，点击任意模板即可进行选择：

接下来就开始生成视频，老马随意从网上选择了一篇公众号文章的链接丢过去，Agent是使用Qwen Code CLI，内容类型选择单帧标题卡：

接着会一步步引导你去选择模版，也就是视觉风格，还有视频的画面尺寸，时长等等，最后点击开始生成：

结果第一次生成的视频老马就翻车了，因为前面选择的内容类型是单帧标题卡，生成后视频就只剩下一个画面了，应该是要选择多帧预告片：

没办法只能重新来过，对html-video的工具还不熟，只能是多次去尝试。接下来就可以选择每帧画面的时长，帧数是多少，Remotion可以开启一下：

这次提交后，就算是生成正常的视频了，而不是整个视频只有一个画面，画面时长还只有几秒。在添加背景音乐和配音那里，就可以使用接入的MiniMax模型去生成，老马这里只生成了背景音乐：

最后html-video就会把生成的画面，跟背景音乐合成在一起。只需要点击工作台右上角的导出MP4即可，导出后可以点击在Finder中显示，使用默认播放器打开播放，或者去文件路径找到生成的MP4文件：

最终生成的视频效果如下，其实每一帧的画面文字都是可以修改优化的，老马就没细改了，直接一键导出。

好了，以上就是今天的分享，欢迎关注、点赞、转发一键三连。有任何问题和需求，请在评论区留言，回见！

对了，老马最近刚创建了一个AI学习交流群，有兴趣进群的小伙伴可以添加老马微信号：immajiabin，添加好友时备注：进群（不备注不通过）。