html-video：开源本地HTML转视频工具，依托网页技术一键生成标准MP4视频

一、html-video是什么？

html-video 是一款开源本地HTML转视频工具，核心理念为 HTML becomes video — on your laptop，直译即在本地设备上将HTML页面转化为标准视频文件。

该项目依托无头浏览器与音视频编码技术，全程在用户本地电脑完成渲染、编码、输出全流程，无需上传内容至云端服务器，兼顾数据安全与使用自由度。开发者、自媒体创作者、运营人员、技术团队均可借助熟悉的 HTML、CSS、JavaScript 语法制作动画、演示画面、图文轮播等内容，再一键导出通用 MP4 视频，打破传统视频剪辑工具的操作壁垒，让网页技术成为视频创作的新载体。

项目完全开源、免费商用，支持 Windows、macOS 主流桌面系统，采用现代化包管理器部署，集成 FFmpeg 音视频编码能力与 Chromium 页面渲染能力，是轻量化、自动化视频生产的优质解决方案。

二、功能特色

html-video 围绕网页转视频核心场景，打造了全套实用功能，兼顾基础使用与高阶自定义，核心特色如下：

1. 纯本地离线渲染
   所有页面加载、帧捕获、视频编码操作均在本地设备完成，不上传任何原始内容、脚本、素材至第三方服务器，有效保护隐私数据与原创内容，适合处理内部文档、涉密演示、专属素材等场景。

2. 原生支持网页动画
   完美兼容标准 HTML、CSS 动画、过渡效果，同时原生适配 GSAP 等主流 Web 动画库，开发者可沿用现有网页动画代码，无需重新学习视频制作语法。

3. 多格式视频输出
   底层默认生成 WebM 中间格式，最终通过 FFmpeg 编码输出行业通用 MP4（H.264） 格式，适配全平台播放、剪辑、发布需求。

4. 内置海量免费模板
   项目自带21套免版权视频模板，覆盖图文展示、数据播报、片头片尾、产品演示、文字动画等常见场景，零基础用户可直接套用模板快速出片。

5. 自动化批量处理
   支持脚本调用、命令行批量执行，可接入自动化工作流、AI 智能体、本地流水线，实现大批量视频自动生成，大幅提升生产效率。

6. 高画质帧捕获
   基于无头 Chromium 逐帧截取页面画面，画面还原度与原网页完全一致，支持自定义分辨率、帧率、码率，满足高清视频制作需求。

7. 跨平台兼容
   完整适配 Windows、macOS 两大桌面操作系统，统一的命令行操作逻辑，跨设备迁移项目、复用脚本无门槛。

8. 低上手门槛
   会基础网页开发知识即可使用，无需掌握专业剪辑软件、动画制作软件，降低视频动画的制作学习成本。

三、技术细节

本章节拆解 html-video 底层技术架构、依赖组件、运行逻辑与核心代码逻辑，内容通俗易懂，同时保留技术准确性。

3.1 核心技术栈

• 运行环境：Node.js，依托 Node 生态实现命令行调度、进程管理、文件读写。

• 页面渲染引擎：无头 Chromium（Headless Chromium），负责加载 HTML 文件、解析 CSS/JS、渲染页面画面、逐帧截图。

• 音视频编码工具：FFmpeg，完成帧画面拼接、格式转码、码率控制、封装为 MP4 标准视频。

• 包管理工具：pnpm，项目推荐使用 pnpm 进行依赖安装、版本管理，安装速度快、磁盘占用低。

• 动画支持：原生 CSS Animation / Transition、JavaScript 动画、GSAP 第三方动画库。

3.2 整体运行流程

整个 HTML 转视频分为三大核心步骤，流程固定且可追溯：

1. 页面初始化
   程序调用无头 Chromium 进程，加载本地指定的 HTML 文件/网页地址，完成资源加载、样式渲染、动画初始化。

2. 逐帧画面捕获
   按照用户设定的帧率、时长、分辨率，定时对渲染后的页面进行截图，生成连续静态图片帧，临时存储在本地缓存目录。

3. 视频编码封装
   调用本地 FFmpeg 程序，将连续图片帧按顺序拼接，进行视频压缩、编码，最终输出 MP4 格式视频文件，完成后自动清理临时缓存文件。

3.3 关键配置与底层参数

• 帧率（FPS）：支持自定义设置，常用 24fps、30fps、60fps，帧率越高视频流畅度越好，文件体积越大。

• 分辨率：完全自定义，支持 1080P、720P、竖屏短视频分辨率等，适配不同发布平台。

• 编码格式：视频编码固定使用 libx264（H.264），是目前兼容性最强的视频编码，全平台设备均可正常播放。

• 缓存机制：临时帧文件仅在渲染过程中生成，任务结束自动删除，不产生冗余垃圾文件。

3.4 基础核心代码示例

项目基于命令行与配置文件运行，以下为典型使用代码片段：

# 1. 全局安装依赖（pnpm 环境）
pnpm install -g html-video

# 2. 基础命令：将本地 index.html 转为视频
html-video ./index.html -o output.mp4 --fps 30 --width 1920 --height 1080

# 3. 自定义时长 + 套用内置模板
html-video template-demo.html -o demo.mp4 --duration 10

3.5 技术优势总结

• 架构轻量化：仅依赖 Node.js、Chromium、FFmpeg 三大主流组件，无冗余重型依赖；

• 解耦设计：渲染、截图、编码三大模块相互独立，单个模块更新不影响整体功能；

• 可二次开发：开源代码允许开发者基于源码二次改造，新增自定义功能、专属模板。

四、应用场景

html-video 凭借网页转视频+本地渲染的特性，覆盖个人、自媒体、企业、开发团队等多类用户场景，具体分类如下：

4.1 自媒体内容创作

• 图文解说视频：将网页文章、技术文档、资讯内容制作成滚动图文视频，用于短视频平台发布；

• 文字动画视频：制作动态字幕、语录动画、热点解读短片，搭配简单网页动画快速出片；

• 片头片尾制作：使用内置模板设计专属视频片头、片尾，统一账号视觉风格。

4.2 技术与产品演示

• 功能演示视频：编写简单 HTML 页面模拟软件操作、功能流程，生成演示视频用于产品介绍；

• 数据可视化视频：结合 ECharts 等网页图表库，制作动态数据大屏、报表动画视频；

• 技术教程短片：将代码演示、网页效果制作成视频，用于编程教学、技术分享。

4.3 企业内部办公

• 内部宣讲短片：制作企业通知、制度讲解、培训课件视频，全程本地操作保障内容安全；

• 会议简报动画：把会议要点、工作简报制作成轻量化动画视频，便于内部流转查看。

4.4 自动化批量生产

• 对接 AI 工作流：搭配 AI 智能体自动生成 HTML 内容，再调用本工具批量转视频，实现无人化生产；

• 批量模板视频：基于统一模板替换文字、图片素材，批量生成系列短视频。

4.5 个人趣味创作

普通用户可套用内置模板，制作生日祝福、节日问候、动态相册等趣味短视频，操作简单无需专业剪辑技能。

五、使用方法

本节从环境准备、安装步骤、基础使用、进阶配置四个维度，讲解完整使用流程，适配 Windows、macOS 系统。

5.1 前置环境准备

使用 html-video 前，必须提前安装两个基础环境：

1. Node.js：推荐 16.x 及以上稳定版本，配置系统环境变量，保证终端可正常调用 node、npm 命令；

2. FFmpeg：下载对应系统版本，解压后将程序目录加入系统环境变量，终端输入 ffmpeg -version 可正常识别即为安装成功；

3. 包管理器 pnpm：安装 Node.js 后，执行命令安装 pnpm：

npm install -g pnpm

5.2 项目安装

打开系统终端（Windows 终端、CMD、PowerShell / macOS 终端），执行全局安装命令：

pnpm install -g html-video

安装完成后，输入 html-video --version，若输出版本号则代表安装成功。

5.3 基础使用（单文件转换）

1. 准备好需要转换的 HTML 文件（可包含 CSS、JS、图片等本地素材）；

2. 进入 HTML 文件所在文件夹，执行基础转换命令：

# 格式：html-video [HTML路径] -o [输出视频名]
html-video test.html -o myvideo.mp4

3. 命令执行后，工具自动启动无头浏览器渲染页面、逐帧捕获、编码转码，完成后在当前目录生成 myvideo.mp4。

5.4 常用参数配置（进阶用法）

可通过附加参数自定义视频属性，常用核心参数如下：

• --fps：设置视频帧率，例 --fps 30

• --width / --height：设置视频分辨率，例 --width 1080 --height 1920（竖屏）

• --duration：设置视频总时长（单位：秒），例 --duration 8

• --template：调用项目内置模板，直接指定模板名称即可套用

示例（1080P/30帧/10秒短视频）：

html-video demo.html -o short.mp4 --fps 30 --width 1920 --height 1080 --duration 10

5.5 批量使用

结合系统批处理脚本（Windows .bat / macOS Shell 脚本），循环调用 html-video 命令，即可实现多 HTML 文件批量转视频，适合大批量生产场景。

六、竞品对比

选取市面上2款同类型网页转视频/代码生成视频工具，从核心定位、部署方式、收费模式、技术门槛、数据安全、功能差异等维度做对比，表格如下：

对比总结：

1. 对比 ScreenToGif：html-video 并非传统录屏工具，而是主动渲染HTML生成视频，支持预设动画、模板，而非被动录制画面，更适合批量制作动画视频；

2. 对比 Remotion：两者均为开源网页技术做视频，但 html-video 上手难度更低、自带模板，面向普通开发者与创作者；Remotion 偏向专业前端团队，适合复杂定制化动画开发。

七、常见问题解答

1. 安装完成后，执行命令提示“ffmpeg 未找到”怎么办？

该问题是 FFmpeg 未配置系统环境变量导致。重新检查 FFmpeg 解压目录，将其添加到系统全局环境变量，重启终端后再次执行命令即可。

2. 转换后的视频画面卡顿、动画不流畅是什么原因？

主要分为两种情况：一是设置的帧率过低，建议将帧率调整为30fps及以上；二是HTML页面内动画逻辑复杂、资源过多，可简化页面动画、减少高清图片素材后重新渲染。

3. 可以直接输入在线网页URL进行转换吗？

支持加载公网在线网页地址，但在线页面受网络、跨域策略影响较大，优先推荐使用本地HTML文件进行转换，稳定性更高。

4. 生成的MP4视频在部分设备无法播放？

html-video 默认使用 H.264 编码，兼容性极强。若出现播放异常，大概率是视频码率过高，可在配置中降低码率，或使用本地播放器重新封装视频。

5. 渲染过程中产生大量临时文件，是否需要手动清理？

不需要。工具在视频编码完成后，会自动删除截图帧等临时缓存文件，不会留存冗余文件，无需手动干预。

6. 内置模板如何调用和修改？

内置模板存放在项目依赖目录中，可通过命令行参数直接调用；也可找到模板源HTML文件，修改文字、图片、样式后自定义使用。

7. 该工具是否支持添加背景音乐？

原生版本仅支持画面生成，暂无音频集成功能。可先生成纯画面视频，再使用 FFmpeg 或常规剪辑软件后期搭配音频。

8. 不同操作系统之间的HTML文件可以互通使用吗？

可以。HTML属于跨平台文件格式，Windows、macOS 下制作的HTML文件，均可在另一套系统中正常渲染转换视频。

八、相关链接

• GitHub仓库地址：https://github.com/nexu-io/html-video

九、总结

html-video 是一款轻量化、纯本地运行的开源 HTML 转 MP4 视频工具，依托 Node.js、无头 Chromium 与 FFmpeg 三大成熟技术组件，将大众熟知的网页技术与视频创作相结合，既降低了动画视频的制作门槛，又凭借离线渲染的特性保障了内容与数据安全。工具兼顾零基础用户与开发者，内置丰富模板满足快速出片需求，命令行运行模式又支持自动化批量生产，适配自媒体创作、产品演示、企业办公、技术教学等多元场景。相较于传统录屏软件和重型前端视频框架，它在易用性、实用性、安全性上形成了独特优势，是网页开发者、短视频创作者、运营人员打造轻量化视频内容的优质开源选择。