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

一、html-video是什么？

在本地电脑上直接生成视频，听起来像是个不小的工程。但现在，有一款名为

的开源工具，正试图把它变得跟写个网页一样简单。它的核心口号是“HTML becomes video — on your laptop”，翻译过来就是：在你自己的笔记本上，把HTML页面变成标准视频文件。

这个项目的底层逻辑并不复杂：利用无头浏览器（Headless Chromium）加载HTML页面，然后逐帧截图，再用FFmpeg编码器把这些截图拼成视频。整个过程全在本地完成，不会把任何内容传上云端，数据安全和隐私保护自然就有了保障。开发者、自媒体创作者、运营人员，甚至技术团队，都能用自己熟悉的HTML、CSS、Ja vaScript来制作动画、演示画面、图文轮播，最后一键导出MP4，省去学专业剪辑软件的时间。

更关键的是，它完全开源、免费商用，支持Windows和macOS两大系统。部署方式紧跟现代开发习惯，兼容pnpm等包管理器，集成了FFmpeg和Chromium的能力，算得上是一个轻量化、自动化的视频生产方案。

二、功能特色

html-video围绕“网页转视频”这个核心做了不少功课，从基础使用到高阶自定义都有覆盖。但具体来说，它到底能做什么？

• 纯本地离线渲染
  ：所有操作——页面加载、帧捕获、视频编码——全在本地设备完成。这意味着你的原始内容、脚本、素材都不会上传到任何第三方服务器，对处理内部文档、涉密演示或专属素材来说，这是刚需。

• 原生支持网页动画
  ：标准的HTML、CSS动画、过渡效果，包括GSAP这类主流Web动画库，都能完美兼容。开发者只需要接着用自己已有的网页动画代码就行，不用重新学一套视频制作的语法。

• 多格式视频输出
  ：底层默认生成WebM中间格式，最后通过FFmpeg编码成行业通用的

  MP4（H.264）
  格式。H.264的兼容性很强，几乎全平台都能播放、剪辑、发布。

• 内置海量免费模板
  ：项目自带了21套免版权模板，覆盖图文展示、数据播报、片头片尾、产品演示、文字动画这些常见场景。就算零基础，也能直接套模板快速出片。

• 自动化批量处理
  ：支持脚本调用、命令行批量执行，可以无缝接入自动化工作流、AI智能体或者本地流水线，实现大批量视频自动生成，生产效率直接拉满。

• 高画质帧捕获
  ：基于无头Chromium逐帧截取页面画面，能保证网页的还原度与原页面完全一致。分辨率、帧率、码率都支持自定义，高清视频完全不是问题。

• 跨平台兼容
  ：Windows和macOS都适配，命令行操作逻辑统一，跨设备迁移项目或者复用脚本都没有门槛。

• 低上手门槛
  ：只要你懂基础网页开发知识，就能用起来。不用去学专业剪辑软件或动画制作软件，学习成本被大大降低。

三、技术细节

这部分我们来拆解一下html-video的底层技术栈、依赖组件和运行逻辑。尽量说得通俗，但技术准确性不会打折。

3.1 核心技术栈

• 运行环境
  ：Node.js。它负责命令行调度、进程管理和文件读写。

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

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

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

• 动画支持
  ：原生CSS Animation / Transition、Ja vaScript动画、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 前置环境准备

用之前，得先装好两个基础环境：

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款同类型的工具——ScreenToGif和Remotion——来做个对比，看看html-video到底强在哪儿。

对比维度	html-video	ScreenToGif（网页录屏转视频）	Remotion（React 视频生成框架）
核心定位	本地HTML直接渲染生成MP4视频	屏幕录屏工具，截取画面后转视频/GIF	基于React组件制作动画视频框架
部署方式	命令行+本地部署，纯离线运行	桌面客户端，图形化操作	Node.js项目，本地项目式部署
收费模式	完全开源、免费、可商用	基础功能免费，高级功能付费	开源免费，商用无限制
技术门槛	低，懂基础HTML就能用	极低，纯图形化点击操作	高，需要掌握React + JS开发
数据安全	全程本地渲染，不上传任何数据	本地录屏，数据本地存储	本地编译渲染，数据安全
动画支持	原生CSS/JS/GSAP动画，适配性强	只录制实时画面，无自定义动画能力	强，React + 专业动画库
模板体系	内置21套免费通用模板	无内置模板	无官方模板，需要自行开发
自动化能力	支持命令行批量、接入自动化流	无自动化批量功能	支持脚本批量，自动化能力强

：

1. 和ScreenToGif比：html-video不是传统录屏工具，而是主动渲染HTML生成视频，支持预设动画和模板，更像一个自动化的动画视频生产线。

2. 和Remotion比：两者都是开源技术，但html-video的上手难度更低，自带模板，面向普通开发者和创作者；而Remotion偏向专业前端团队，适合做复杂的定制化动画。

七、常见问题解答

这个问题通常是FFmpeg没有配置系统环境变量导致的。重新检查一下FFmpeg的解压目录，把它添加到系统全局环境变量中，然后重启终端再试一次。

主要有两种情况：一是帧率设置得太低，建议调到30fps或更高；二是HTML页面里的动画逻辑太复杂或者资源太多，可以试着简化页面动画、减少高清图片素材后再渲染一次。

支持加载公网在线网页地址。不过在线页面受网络和跨域策略影响比较大，更推荐使用本地HTML文件，稳定性更高。

html-video默认用H.264编码，兼容性已经很强了。如果还有播放异常，大概率是视频码率太高，可以在配置里降低码率，或者用本地播放器重新封装一下视频。

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

内置模板存放在项目依赖目录里，通过命令行参数可以直接调用。如果想修改，找到模板的源HTML文件，改文字、图片、样式都行。

原生版本只支持画面生成，暂时没有音频集成功能。可以先生成纯画面视频，然后用FFmpeg或者普通的剪辑软件后期再加音频。

可以。HTML文件本身就是跨平台的，Windows和macOS下制作的HTML文件，在另一套系统里也能正常渲染转换视频。

八、相关链接

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

九、总结

html-video是一款轻量化、纯本地运行的开源HTML转MP4视频工具。它把Node.js、无头Chromium和FFmpeg这三个成熟技术组件整合在一起，让大众熟悉的网页技术直接服务于视频创作。一方面降低了动画视频的制作门槛，另一方面靠着离线渲染的特性，保证了内容和数据的安全性。工具兼顾了零基础用户和开发者：内置的丰富模板让快速出片成为可能，命令行运行模式又支持自动化批量生产，适配自媒体创作、产品演示、企业办公、技术教学等多元场景。和传统录屏软件或者重型前端视频框架比起来，它在易用性、实用性和安全性上优势明显。对于网页开发者、短视频创作者、运营人员来说，这确实是一个打造轻量化视频内容的优质开源选择。