HTML转视频本地免费搞定html-video 完整上手指南【免费下载链接】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做一条 30 秒的短视频需要多久写脚本、找素材、剪辑、加字幕、配音乐一个人熟练操作也得两小时起步。如果这条视频要讲的恰好是你刚写完的一篇文章或者你刚发布的开源项目呢html-video 这个开源的 HTML转视频工具给出了另一条路把文章链接或主题交给本地 AI 编程助手它替你规划分镜、写好每帧文案最后在你自己的电脑上渲染出真正的 MP4。全程无云端渲染、无按次收费Apache-2.0 许可随你用不用担心哪一天突然要按条付费。一个 30 秒视频背后的隐性成本很多内容团队的真实状态是选题产出的速度快视频供给跟不上。文章半小时能改完但配一支短视频光是在剪辑软件里拖时间轴就要耗掉大半天。更麻烦的是数据一变、文案一改整支视频又要重剪。这正是 html-video 想解决的。它不是又一个在线视频生成网站而是一个运行在你本地的视频生产流水线前端是你熟悉的 AI 编程助手Claude Code、Codex、Gemini CLI、Windsurf 等 14 种后端是浏览器录制加 ffmpeg 编码。你只负责说要一支什么视频剩下的由助手和工具链接力完成。html-video 是什么给你的 AI 助手配一条视频流水线把 html-video 想成一个视频导演角色它不亲自画每一帧而是指挥你电脑里现成的 AI 助手按一套标准流程产出视频。这套流程藏在packages/下的几个模块里packages/core/项目与素材的类型定义、渲染编排packages/content-graph/把多帧故事板组织成节点与边的中间结构packages/runtime/AI 助手运行时负责探测、启动与流式对话packages/adapter-hyperframes/默认渲染引擎无头 Chromium 逐帧录制 HTML 动画packages/cli/命令行入口与本地工作室服务器packages/project-studio/浏览器里的可视化工作台与传统做法的差别用一张表就能看清维度传统剪辑html-video脚本来源人工撰写AI 基于你的素材自动生成画面制作逐帧手调模板驱动AI 填充内容渲染地点云端或本地软件本机 Chromium ffmpeg按条收费常见无纯本地改稿成本重剪逐帧改文案后重渲染渲染引擎被抽象成一份render(input, ctx)契约默认是 Hyperframes以后接入 Remotion、Motion Canvas 时故事板和助手流程都不用重写。这正是它被称为meta-layer的原因——引擎是细节AI 才是主角。开工前的三分钟检查四个依赖就位再动手html-video 对机器要求不高但要先确认四样东西在不在依赖要求检查命令Node.js20node --versionpnpm9pnpm --versionffmpeg任意较新版本ffmpeg -versionChromium无版本要求见下方安装命令拿到源码后安装依赖并完成构建git clone https://gitcode.com/gh_mirrors/ht/html-video cd html-video pnpm install pnpm -r build如果系统里没有 Chromium让 Playwright 装一个内置的即可npx playwright install chromium装完跑一次环境体检它会一次性告诉你哪些 AI 助手和渲染引擎可用node packages/cli/dist/bin.js doctor看到类似agent 已检测、引擎已就绪的结果就可以进入下一步了。从一篇公众号文章到第一支视频四步跑通全流程在项目根目录启动本地工作室node packages/cli/dist/bin.js studio浏览器会自动打开 http://127.0.0.1:3071这就是你的视频工作台。整个流程可以拆成四步选助手顶栏会自动列出检测到的 AI 助手切换即可如果什么都没装填一个 Anthropic API 密钥也能直连给素材把微信公众号文章链接、网页地址或 GitHub 仓库粘进去也可以只写一句主题描述生成故事板助手会读取真实内容决定需要几个场景产出每帧的文案和画面网址由工作室在服务端抓取公众号文章这类页面也能直接解析不用你手动复制正文预览导出逐帧确认效果点导出MP4 就在本地生成一条 1500 字的文章几分钟内就能变成一支有节奏、有动画、每句话都能追溯回原文的多场景解说视频。模板库对号入座21 个模板覆盖的主流场景模板是这支视频的视觉皮肤。html-video 内置 21 个模板每个都由一份template.html-video.yaml清单描述AI 助手靠它知道该填什么内容、输出什么规格甚至知道能不能商用。按用途大致可以分成五类类别代表模板适合场景数据可视化frame-data-chart-nyt、frame-data-rollup讲数字、讲趋势标题与特效frame-glitch-title、vfx-text-cursor开场、爆点、代码演示主视觉与电影感frame-liquid-bg-hero、frame-light-leak-cinema产品发布、品牌氛围片产品宣传frame-product-promo-30s15 秒 / 30 秒多场景广告解说骨架frame-decision-tree概念拆解、教学比如要讲数字涨上去了的故事NYT 风格的动态折线图模板天然合适要做产品开场液态渐变主视觉更抓眼球。每个模板都自带明确的许可标注SPDX 标识、是否要求署名、是否允许商用。所有模板都允许放进商业作品接单做宣传片时不必再单独做版权审查。好视频不是一次生成的逐帧改文案、调顺序、加配乐AI 生成的第一版通常能看但离能用还有距离。html-video 把修改成本压到了最低逐帧编辑在帧条上点开任意一帧直接改文案改完重渲染单帧即可重排顺序拖拽调整场景先后故事板里的边关系会自动跟着更新换风格内容不变只换模板重新渲染快速对比不同视觉声音也一样。在设置里填入 MiniMax API 密钥后可以给成片配两样东西描述一段情绪比如舒缓的电影感氛围缓慢推进生成背景音乐写一段文案让 AI 朗读生成旁白。导出时两者会按音量避让自动混进 MP4。不配密钥也不影响其他功能按需开启即可。渲染报错时先检查这三处本地渲染偶尔会遇到失败九成是下面三种情况AI 助手没被识别确认它真的装在 PATH 里或者干脆填一个 Anthropic API 密钥直连绕开 CLI 探测Chromium 缺失或版本过旧重跑一次npx playwright install chromium再执行doctor验证依赖没构建干净回到项目目录重新pnpm install pnpm -r build模板加载类报错多半由此而来排查顺序建议先doctor看探测结果再逐项对照上表多数问题十分钟内能定位。不想开浏览器用 CLI 命令脚本化出片工作室适合人机交互批量场景则交给命令行。packages/cli/提供了一组可脚本化的命令按意图搜模板比如做一支 GitHub 星标变化的视频node packages/cli/dist/bin.js search-templates --intent github stars race --top 3创建项目、设置变量、直接渲染导出node packages/cli/dist/bin.js project-create --name demo --intent 介绍我的开源项目 node packages/cli/dist/bin.js project-set-var id --key headline --value Hello node packages/cli/dist/bin.js project-render id --output demo.mp4把这几条命令串进脚本就能对一批内容源批量出片适合做日更的账号矩阵。现在就能动手你的第一条 AI 视频回头看开头的那个 30 秒视频有了 html-video你不再需要下载剪辑软件、学时间轴、为素材版权发愁。需要准备的只有三样——一台装了 Node 的电脑、一个 AI 助手账号、以及一个想讲的内容。今天就试试clone 项目、跑通doctor、把一篇你最近写的文章粘进工作室看它如何被拆解成一场有节奏的故事板。第一次出片后再回头探索模板库和配乐功能你会发现视频生产的门槛已经低到只剩想清楚要说什么这一步。【免费下载链接】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），仅供参考