不想学剪辑软件用 html-video 让 AI 编程助手把文章一键变成 MP4 视频【免费下载链接】html-videoProgrammatic video for coding agents — HTML to video on your laptop. Turn HTML, CSS data into real MP4s with pluggable render engines, 21 templates, AI soundtrack. Apache-2.0, no per-render fees. An official project by the Open Design team.项目地址: https://gitcode.com/gh_mirrors/ht/html-video你是不是也有过这样的时刻花两小时写好一篇干货文章却看着别人把同样的内容做成几十秒的短视频数据比自己好十倍又或者想给开源项目做个宣传片Premiere、剪映学了一周导出时发现模板全都要付费如果你同时还是一个程序员那还有更憋屈的——明明 HTML 和 CSS 是你的主场却要从头去学一套和写代码毫无关系的视频软件。这就是 html-video 想解决的问题。这个由 Open Design 团队开源的 AI 生成视频工具把视频制作重新拉回了程序员熟悉的领域你负责用 HTML、CSS 和想法描述视频你电脑里的 AI 编程助手负责把它变成一支真实可播放的 MP4。整个过程完全在本地跑无需云渲染、不按次收费协议为 Apache-2.0可以放心用在商业项目里。它凭什么敢说不用学剪辑先说结论html-video 不是又一个套着浏览器壳的剪辑工具而是一层架在AI 编程助手和渲染引擎之间的元层meta-layer。它默认支持 14 种主流 AI 助手——Claude Code、Cursor、Codex、Gemini、Qwen Code、Copilot CLI、Aider 等系统会自动探测你 PATH 里装好的那个在界面顶栏一键切换就算一个都没装填一个 Anthropic API 密钥也能直接开工。它的工作链路是一条完整的流水线你给出一个链接或一句话 → 服务端抓取素材并扁平化成 Markdown → AI 助手读取素材并产出多帧故事板 → 每个故事板节点变成一段自带动画的 HTML → 无头 Chromium 逐帧录制 → ffmpeg 编码成 MP4。也就是说从素材到成片AI 编程助手在里面扮演的是导演 编剧 动画师的角色。更关键的是引擎可插拔。当前内置的 Hyperframes 引擎已经能渲染出真实 MP4而 Remotion、Motion Canvas 都在路线图上——将来切换引擎只需要替换适配器这一层故事板和 AI 循环原封不动。这也是它和同类工具最大的区别你学的不是某个引擎的私有 DSL而是一套稳定的对话式工作流。实战把一篇公众号文章变成 30 秒解说视频光说不练假把式。我们用一个最常见的场景走一遍完整流程把一篇公众号文章做成多帧解说视频。整个项目只需要四条命令就能跑起来git clone https://gitcode.com/gh_mirrors/ht/html-video cd html-video pnpm install pnpm -r build前置依赖是 Node.js 20、pnpm 9、ffmpeg以及一个 Chromium没有系统版的话npx playwright install chromium一行搞定。第一步启动本地工作室node packages/cli/dist/bin.js studio浏览器会打开 http://127.0.0.1:3071 这就是你的视频制作工作室。左侧是对话区右侧是模板库顶栏可以切换 AI 助手。整个界面就是一个项目工作台你可以把不同内容的视频拆成独立项目管理。第二步丢一个链接进去把文章链接粘贴进对话区例如一篇微信公众号文章。这里有个很贴心的设计AI 助手作为本地 CLI 没有联网能力所以是工作室在服务端抓取页面再喂给助手——像公众号这种无需登录的服务端渲染页面开箱即用不用你手动复制正文。助手读完全文后会自动决定内容该拆成几个场景产出一份叫 content-graph 的故事板文章要点变成节点要点之间的关系承接、对比、依赖变成边再通过拓扑排序确定帧的先后与时长。这也是 html-video 最有技术含量的一层——它用图结构而不是简单的列表来组织视频为后续逐帧编辑保留了充分的信息。第三步挑一个对味的模板故事板生成后该给每一帧选视觉风格了。21 个内置模板覆盖了主流场景每个模板都带一份template.html-video.yaml清单写明了用途、输入参数、输出规格和许可来源AI 助手靠这份清单就能精确知道该往哪个槽位填什么内容。比如做数据解读用 NYT 风格的动态折线图模板大标题配标注数据点和来源行很适合数字涨上去了这类叙事想要开场有冲击力故障标题卡模板自带色彩偏移和扫描线适合系统上线式的能量感如果做产品发布液态渐变背景的主视觉模板能撑起品牌质感拍氛围短片则有暖色胶片颗粒加漏光的电影感模板可用。模板库里可以实时预览动效而不是看静态缩略图。第四步逐帧改文案导出 MP4视频生成后你可以像剪辑师一样逐帧审查改某一帧的文字、调场景顺序、换模板风格。每帧都是自包含的 HTML改完重渲染只影响那一帧不用重跑整个流程。最后点击导出无头 Chromium 会按帧录制动画ffmpeg 用 libx264 编码并拼接成一支 MP4全程在你的机器上完成。两个能让成品质变的高级玩法玩法一给成片加上 AI 配乐和旁白。在设置里填入 MiniMax API 密钥后你可以在配乐面板里描述一种情绪比如舒缓的电影感氛围缓慢推进MiniMax 会生成一段器乐旁白则输入文案即可由 TTS 朗读。导出时 ffmpeg 会把音乐压到人声之下、可选淡入淡出混进最终 MP4。不配密钥也完全不影响其他功能。玩法二用 CLI 脚本批量干活。工作室适合人机交互但如果你想批量处理多个内容源CLI 工具才是效率担当。doctor命令能体检你的环境配置search-templates能按意图搜索最合适的模板node packages/cli/dist/bin.js doctor node packages/cli/dist/bin.js search-templates --intent github stars race --top 3把它写进 CI 或定时脚本就能实现新文章发布 → 自动生成短视频的全自动化链路。过来人的避坑指南我踩过的坑希望你别再踩一遍。最典型的一个是渲染失败先别怀疑代码——按顺序检查 Chromium 是否装好、ffmpeg 是否在 PATH 里、磁盘空间是否充足。其次是模板选型要匹配内容密度像 Bold Poster 这类海报模板擅长少量大字陈述硬塞大段文字进去效果会很难看信息量大的内容请换数据可视化或解说类模板。另外渲染时长和动画复杂度正相关模板清单里标注了参考渲染耗时比如某模板 5 秒成片在 M2 MacBook Air 上约需 10 秒长视频导出前预留好时间。还有一个容易忽略的点模板的许可已经替你审过了。仓库根的 NOTICE.md 记录了每个模板的来源与 SPDX 标识来源不明或许可不清的一律不收你可以放心把成品用于商业投放无需再做法务审查。适合谁以及你现在就可以开始如果你是内容创作者这篇文章讲的方法能把写文章和做短视频合并成一条流水线如果你是开源项目维护者把仓库地址丢进去就能生成项目介绍视频用于 README 或发布公告如果你是数据团队动态图表模板能让你的季度报告从 Excel 截图进化成可传播的视频。回看开头那个问题不会剪辑软件就真的做不了视频吗html-video 给出的答案是——把剪辑的活儿交给 AI 编程助手把设计的活儿交给模板把渲染的活儿交给本地引擎而你只需要像平时写代码那样清晰地描述你想要什么。现在就可以动手clone 仓库、装上依赖、打开 http://127.0.0.1:3071 把你最近那篇觉得值得被更多人看到的文章丢进去。第一支由你亲自导演的 AI 生成视频可能就在半小时后诞生。等到那天你或许会和我一样发现做视频原来可以和写代码一样顺手。【免费下载链接】html-videoProgrammatic video for coding agents — HTML to video on your laptop. Turn HTML, CSS data into real MP4s with pluggable render engines, 21 templates, AI soundtrack. Apache-2.0, no per-render fees. An official project by the Open Design team.项目地址: https://gitcode.com/gh_mirrors/ht/html-video创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考