开源视频工具 on 拾光集

Remotion：用 React 批量生成固定栏目、排行榜和数据周报

Tue, 28 Jul 2026 13:38:00 +0800

每周都要制作相似的视频内容，例如固定栏目、产品排行榜、行业数据周报，如果每次都重新改文字、换图片、调整动画，不仅耗时，还容易出现排版不一致的问题。

Remotion 提供了一种更适合批量生产的方式：使用 React、CSS、SVG、Canvas 等网页技术编写视频模板，再把标题、图片、排名、价格、数据和字幕作为参数传入，自动生成不同版本的视频。

Remotion 能做什么？

Remotion 的核心不是“自动剪辑”，而是用代码创建可重复使用的视频模板。

例如，可以先制作一个排行榜视频模板，然后只替换数据：

const rankingData = [
  { name: "项目 A", stars: 52000 },
  { name: "项目 B", stars: 43000 },
  { name: "项目 C", stars: 38000 },
];

当排行榜数据发生变化时，不需要重新设计视频，只需要更新数据，就可以再次渲染生成新的 MP4 文件。

适合哪些内容？

Remotion 特别适合结构固定、需要持续更新的视频内容，例如：

GitHub 热门项目排行榜
AI 工具推荐栏目
每周科技新闻速览
网站流量数据周报
电商产品榜单
股票或行业数据动画
批量商品宣传视频
个性化年度总结视频

对于这类内容，模板通常保持不变，变化的只是标题、图片、排名和数据，因此非常适合自动化生成。

为什么它能减少重复工作？

传统制作方式中，每一期视频都需要手动复制工程、修改文字、替换图片并重新检查动画。

使用 Remotion 后，可以把整个流程拆成三部分：

视频模板：负责画面布局、动画和转场。
内容数据：保存标题、图片、排行榜和统计数据。
渲染脚本：自动读取数据并输出 MP4 视频。

以后更新栏目时，只需要修改 JSON、表格或接口数据，就能生成新的视频内容。

Remotion 的主要优势

使用 React 编写视频，前端开发者容易上手
支持 CSS、SVG、Canvas 和 WebGL
视频中的文字、图片和数据都可以动态替换
可以连接 API、数据库或 JSON 文件
支持批量生成多个不同版本
最终可渲染为 MP4 视频
适合接入自动化内容生产流程

使用前需要注意

Remotion 更适合有一定前端或 JavaScript 基础的用户。它不是传统的拖拽式剪辑软件，第一次使用时仍需要编写模板和配置渲染环境。

另外，Remotion 采用特殊许可证。个人项目和部分小型项目通常可以使用，但企业在正式投入生产前，应查看官方最新许可证说明。

总结

Remotion 最有价值的地方，不是帮你做一条视频，而是帮你建立一套可以反复使用的视频生产系统。

固定栏目、排行榜、数据周报和批量营销视频，只需要设计一次模板，后续更新数据即可重新生成，能够明显减少重复剪辑和排版工作。

项目地址

GitHub：https://github.com/remotion-dev/remotion

video-use：把原始素材交给 AI，自动完成剪辑、字幕与调色

Tue, 28 Jul 2026 12:14:00 +0800

传统视频剪辑最耗时间的，往往不是拍摄，而是后期处理。

删除停顿、处理口头禅、生成字幕、调整画面颜色、添加转场和动效，这些操作并不复杂，但需要反复查看时间轴，非常消耗时间。

video-use 是一个开源 AI 视频剪辑项目。它可以配合 Claude Code 等 AI 编程代理，通过自然语言完成视频剪辑。你只需要把原始素材放进指定文件夹，再告诉 AI 想要什么效果，它就会分析视频并输出最终的 MP4 文件。

video-use 能做什么？

1. 自动删除停顿和口头禅

对于口播、教程和采访类视频，素材中经常会出现长时间停顿，以及“嗯”“啊”等无意义语气词。

video-use 可以先识别音频和字幕内容，再根据上下文判断需要删除的片段，减少手动查找剪切点的时间。

2. 自动生成并添加字幕

项目可以对视频语音进行转录，并将字幕添加到最终视频中。

相比单纯按照静音位置切割，它还会结合单词边界和字幕时间，尽量避免出现声音被截断、字幕与画面不同步等问题。

3. 自动调色和处理画面

你可以直接用自然语言提出要求，例如：

`1`	`让画面更明亮一些，增加对比度，并统一不同镜头的颜色。`

AI 会根据视频画面进行调色处理，也可以添加淡入淡出、缩放、字幕强调和动画叠加等效果。

4. 直接输出 MP4 视频

整个流程不需要频繁操作复杂的时间轴。

你可以把需求直接告诉 AI，例如：

删除视频中的停顿和口头禅。

为视频生成中文字幕。

给重点句子添加轻微放大效果。

统一画面颜色，并导出为 final.mp4。

video-use 会调用 FFmpeg 等工具执行剪辑，并将处理后的内容渲染成视频文件。

哪些人适合使用？

video-use 比较适合以下场景：

自媒体口播视频
软件操作教程
产品演示视频
访谈和播客片段
旅行视频与素材混剪
不想反复操作时间轴的内容创作者

它的优势不是完全替代专业剪辑软件，而是把大量重复操作交给 AI。

对于需要精细控制每一个镜头、音效和关键帧的商业项目，Premiere Pro、DaVinci Resolve 等传统剪辑软件仍然更加合适。但对于日常短视频、教程和口播内容，video-use 可以明显缩短基础剪辑时间。

使用思路

基本流程可以概括为：

准备原始视频
    ↓
将素材放入项目文件夹
    ↓
通过 Claude Code 输入剪辑要求
    ↓
AI 分析画面、语音和字幕
    ↓
自动执行剪切、字幕、调色和动效
    ↓
输出 final.mp4

需要注意的是，video-use 更接近一套面向 AI Agent 的视频剪辑工作流，并不是传统的可视化剪辑软件。

使用前通常需要准备 Claude Code、FFmpeg 及项目要求的相关运行环境。具体安装方式应以项目仓库中的最新 README 文档为准。

总结

video-use 把视频剪辑从“手动拖动时间轴”，变成了“用自然语言描述需求”。

把拍摄好的素材放进去，告诉 AI 删除停顿、生成字幕、调整颜色和添加动效，它就能自动完成大量基础后期工作。

对于经常制作口播、教程和短视频的创作者来说，这类 AI 视频剪辑工具真正节省的不是某一个操作，而是重复检查、修改和导出的时间。

项目地址

GitHub：

`1`	`https://github.com/browser-use/video-use`

HyperFrames：用一句提示词生成网页动画，并渲染为 MP4 视频

Tue, 28 Jul 2026 12:07:00 +0800

做产品演示、工具介绍或数据动画时，传统视频软件往往需要手动调整时间轴、关键帧和字幕，制作过程比较繁琐。

HyperFrames 提供了另一种思路：使用 HTML、CSS 和 JavaScript 编写视频画面，再将网页动画逐帧渲染成 MP4 文件。

它尤其适合配合 Claude Code、Codex 等 AI 编程助手使用。你只需要描述视频主题、画面风格和动画效果，AI 就可以帮助生成对应的网页动画代码，然后通过 HyperFrames 完成预览和视频导出。

HyperFrames 是什么？

HyperFrames 是 HeyGen 开源的 HTML 视频渲染框架。

它可以把 HTML 页面、CSS 样式、图片、视频素材和可控制的网页动画，转换为帧数稳定、结果可复现的 MP4 视频。

简单理解就是：

用写网页的方式制作视频，再把网页动画渲染成 MP4。

HyperFrames 本身并不是 Sora、Veo 这类直接生成真实画面的文生视频模型。所谓“一句话生成视频”，通常是让 AI 编程助手根据提示词生成 HTML、CSS 和 JavaScript，再调用 HyperFrames 完成渲染。

HyperFrames 可以做什么？

1. 制作产品宣传视频

可以用网页布局展示产品界面、功能卖点、价格方案和操作流程，适合制作 SaaS 产品介绍视频。

2. 生成动态数据视频

网页中的图表、数字、进度条和排行榜都可以加入动画，用于制作数据报告、业务汇报和社交媒体内容。

3. 制作文字与字幕动画

通过 CSS 或 GSAP 控制文字进入、缩放、渐变和切换效果，适合知识类短视频、教程和信息卡片。

4. 输出标准 MP4 文件

动画完成后，可以通过命令行直接渲染为 MP4，方便上传到抖音、视频号、YouTube 或其他视频平台。

为什么适合 AI 编程助手？

传统视频编辑依赖时间轴操作，而 HyperFrames 的视频内容本质上是代码。

这意味着 AI 可以直接修改：

视频尺寸和时长
文字内容与页面布局
CSS 动画和转场效果
图片、视频和音频素材
字幕、图表和品牌样式

例如，你可以直接告诉 AI：

使用 HyperFrames 创建一段 10 秒的产品介绍视频。

要求：
1. 画面比例为 16:9
2. 深色科技风格
3. 开头显示产品名称
4. 中间依次展示三个核心功能
5. 结尾显示网站地址
6. 添加平滑的文字进入和页面切换动画
7. 最后渲染为 MP4

AI 会根据要求生成视频页面，再通过 HyperFrames 进行预览和导出。

基本使用流程

第一步：安装 HyperFrames Skill

官方提供了适用于 AI 编程助手的 Skill，可以通过下面的命令安装：

`1`	`npx skills add heygen-com/hyperframes`

第二步：让 AI 生成视频页面

在 Claude Code、Codex 或其他支持 Skill 的 AI 工具中，描述视频主题、时长、比例和动画要求。

第三步：浏览器预览

HyperFrames 使用普通 HTML 作为视频内容，因此可以先在浏览器中查看动画效果，再继续修改。

第四步：渲染 MP4

准备好 HTML 文件后，可以运行：

`1`	`npx hyperframes render index.html`

HyperFrames 会逐帧录制网页动画，并输出 MP4 视频文件。

适合哪些用户？

HyperFrames 比较适合：

想用 AI 批量制作短视频的人
熟悉 HTML、CSS 或 JavaScript 的开发者
需要制作产品演示视频的独立开发者
想自动生成数据动画和信息视频的内容创作者
不想反复拖动传统视频时间轴的用户

不过，它更擅长制作网页动画、产品演示、字幕和动态图表，并不适合直接生成复杂的真人电影画面。

总结

HyperFrames 把网页开发和视频制作连接在了一起。

你可以先用一句提示词让 AI 生成 HTML 动画，再使用 HyperFrames 将动画稳定地渲染为 MP4。对于产品介绍、数据展示、教程动画和批量短视频制作来说，这种工作方式比传统手动剪辑更容易自动化和重复使用。

项目地址

GitHub：https://github.com/heygen-com/hyperframes
官方网站：https://hyperframes.heygen.com/

WorkBuddy + HyperFrames 安装教程：接入本地 Qwen3-TTS，实现自己的声音自动配音

Tue, 28 Jul 2026 11:55:00 +0800

想用 AI 自动生成动画视频，但不熟悉 Node.js、FFmpeg、命令行和环境配置？

一种更省事的方案是：使用 WorkBuddy 协助安装和排查问题，用 HyperFrames 把 HTML 动画渲染成 MP4，再通过桥接脚本接入本地 Qwen3-TTS，实现字幕、画面和个人声音配音的一体化制作。

一、三个工具分别做什么？

WorkBuddy

WorkBuddy 是腾讯推出的桌面 AI Agent。它不仅能回答问题，还可以协助执行命令、安装依赖、修改文件和分析报错。

在这套流程中，它主要负责：

检查电脑环境
安装 HyperFrames
执行终端命令
分析安装报错
编写 Qwen3-TTS 桥接脚本
调整视频项目文件

需要注意的是，WorkBuddy 本身不是 HyperFrames 的必要依赖。熟悉命令行的用户，也可以手动完成全部操作。

HyperFrames

HyperFrames 是 HeyGen 开源的 HTML 转视频框架。

它允许开发者使用 HTML、CSS、JavaScript 和动画时间轴制作画面，再按照固定帧逐帧渲染为 MP4 视频。

适合制作：

产品介绍动画
数据可视化视频
知识讲解视频
字幕配音视频
网页演示视频
社交媒体短视频

与传统录屏不同，HyperFrames 使用确定性的逐帧渲染方式。同一个项目重复渲染时，画面和动画时间通常能够保持一致。

Qwen3-TTS

Qwen3-TTS 是通义千问团队开源的语音生成模型，支持文本转语音、音色设计和声音克隆。

将它部署在本地后，可以用参考音频生成接近目标音色的配音，不必每次调用第三方在线语音接口。

请只克隆自己拥有授权的声音，不要冒用他人身份或未经允许复制他人音色。

二、安装前需要准备什么？

本文以 Windows 环境为例。

建议提前准备：

Node.js
FFmpeg
WorkBuddy
已部署的 Qwen3-TTS，可选
足够的磁盘空间

如果暂时没有 Qwen3-TTS，也可以先完成 HyperFrames 的安装和视频渲染，后续再接入本地配音。

三、安装 Node.js

前往 Node.js 官网下载长期支持版，也就是 LTS 版本。

安装完成后，打开 PowerShell 或 Windows Terminal，执行：

1
2

node -v
npm -v

如果能够正常显示版本号，说明 Node.js 和 npm 已安装成功。

例如：

1
2

v22.x.x
10.x.x

如果系统提示找不到 node 命令，可以尝试：

关闭并重新打开终端。
重启电脑。
检查 Node.js 是否已加入系统环境变量。

四、安装 FFmpeg

以管理员身份打开 PowerShell，然后执行：

`1`	`winget install --id Gyan.FFmpeg`

安装完成后，重新打开终端并检查：

`1`	`ffmpeg -version`

能够看到 FFmpeg 的版本和编译信息，即表示安装成功。

如果 winget 无法使用，也可以从 FFmpeg 官方网站下载 Windows 构建版本，再手动配置环境变量。

五、安装 WorkBuddy

前往 WorkBuddy 官方网站，下载适合 Windows 或 macOS 的客户端。

安装并登录后，可以先让 WorkBuddy检查当前环境：

`1`	`请检查这台电脑是否已经安装 Node.js、npm 和 FFmpeg，并分别输出版本号。缺少的依赖请告诉我具体安装方法。`

这样做的好处是，可以先发现环境问题，再开始安装 HyperFrames，避免安装到一半才发现依赖缺失。

六、使用 WorkBuddy 安装 HyperFrames

打开 WorkBuddy，新建一个空文件夹作为视频项目目录，然后输入：

`1`	`请在当前目录安装 HyperFrames，并创建一个可以预览和渲染的最小示例项目。完成后检查 Node.js、FFmpeg 和浏览器渲染依赖是否正常。`

也可以手动安装 HyperFrames Skill：

`1`	`npx skills add heygen-com/hyperframes --yes`

安装完成后，可以让 WorkBuddy 创建一个简单测试视频：

请使用 HyperFrames 创建一个 8 秒的 16:9 测试视频。

要求：
1. 深色背景。
2. 中间显示“Hello HyperFrames”。
3. 文字淡入并轻微向上移动。
4. 最后导出为 MP4。

七、运行环境体检

在项目目录中执行：

`1`	`npx hyperframes doctor`

部分安装方式可能也支持：

`1`	`hyperframes doctor`

建议优先使用 npx hyperframes，因为它会调用当前项目使用的版本，能够减少全局版本和项目版本不一致的问题。

环境体检通常会检查：

Node.js
FFmpeg
浏览器或 Chromium
HyperFrames 项目配置
视频渲染相关依赖

如果出现报错，不要只发送最后一行错误。建议把完整终端输出复制给 WorkBuddy：

1
2
3

下面是执行 npx hyperframes doctor 后的完整报错。

请先判断是哪项依赖失败，再给出修复步骤。不要删除现有项目文件，也不要升级无关依赖。

八、预览和渲染视频

创建好 HTML 动画项目后，可以先预览：

`1`	`npx hyperframes preview`

确认画面、动画和字幕没有问题后，再执行渲染：

`1`	`npx hyperframes render index.html`

也可以指定输出文件：

`1`	`npx hyperframes render index.html --output output.mp4`

不同版本的命令参数可能有所变化。如果命令报错，应先运行：

`1`	`npx hyperframes --help`

以当前安装版本显示的命令为准。

九、接入本地 Qwen3-TTS

HyperFrames 负责画面渲染，Qwen3-TTS 负责生成配音。两者之间通常需要增加一个桥接层。

整体流程如下：

视频文案
   ↓
桥接脚本
   ↓
本地 Qwen3-TTS 接口
   ↓
生成 WAV 或 MP3
   ↓
HyperFrames 读取音频
   ↓
根据音频时长生成字幕和动画
   ↓
导出 MP4

桥接脚本主要负责：

接收需要配音的文字。
调用本地 Qwen3-TTS。
指定参考音频和参考文本。
保存生成的音频。
把音频文件路径返回给 HyperFrames。

十、让 WorkBuddy 编写桥接脚本

假设本地 Qwen3-TTS 已经提供 HTTP API，可以向 WorkBuddy 输入：

我的本地 Qwen3-TTS 服务已经启动，请为当前 HyperFrames 项目编写一个 TTS 桥接脚本。

要求：
1. 接收中文文本。
2. 调用本地 Qwen3-TTS HTTP API。
3. 支持配置 API 地址、参考音频和参考文本。
4. 将生成结果保存到 public/audio 目录。
5. 返回音频文件路径和音频时长。
6. 请求失败时输出明确的错误信息。
7. 不要把本地路径和接口地址写死，统一放到 .env 文件中。
8. 同时生成 .env.example 和使用说明。

建议在 .env 中保存类似配置：

1
2
3

QWEN_TTS_API_URL=http://127.0.0.1:8000
QWEN_TTS_REF_AUDIO=D:/voice/reference.wav
QWEN_TTS_REF_TEXT=这里填写参考音频对应的准确文字

不要把真实的本地路径、密钥或个人声音样本提交到公开 GitHub 仓库。

可以在 .gitignore 中加入：

.env
public/audio/
private/
*.wav

十一、一个容易忽略的问题：接口格式不一定相同

“已经部署 Qwen3-TTS”并不代表所有项目都使用相同接口。

不同的本地部署项目可能使用：

Python 函数调用
FastAPI 接口
Gradio 接口
OpenAI 兼容接口
自定义 WebSocket 接口

因此，桥接脚本不能直接照搬。至少要先确认：

接口地址：
请求方法：
请求参数：
返回格式：
音频格式：
是否需要参考音频：
是否需要参考文本：

可以让 WorkBuddy读取本地 Qwen3-TTS 项目的 README 或接口代码，然后根据真实接口编写适配脚本。

推荐提示词：

`1`	`请读取这个 Qwen3-TTS 项目的 README 和服务端接口代码，确认真实的请求地址、参数和返回格式，再修改 HyperFrames 桥接脚本。不要猜测接口字段。`

十二、生成自己的声音配音

Qwen3-TTS 的声音克隆通常需要准备：

一段清晰的参考音频
参考音频对应的准确文字
需要生成的新文案

参考音频建议：

环境安静
没有背景音乐
没有明显混响
只有一个人说话
发音清楚
参考文本与录音内容一致

完成配置后，可以让 WorkBuddy执行测试：

请使用本地 Qwen3-TTS 生成一段中文测试配音，文案为：

“这是通过 HyperFrames 和本地语音模型生成的一段测试视频。”

生成后检查音频是否可以正常播放，再把它加入 HyperFrames 时间轴，并生成同步字幕。

确认试听结果正常后，再开始生成正式视频。

十三、常见问题

1. 找不到 `hyperframes` 命令

优先尝试：

`1`	`npx hyperframes --help`

如果可以运行，说明 HyperFrames 安装在当前项目，而不是全局环境。

2. FFmpeg 已安装，但终端仍然找不到

关闭所有终端窗口后重新打开。

仍然无效时，检查 FFmpeg 的 bin 目录是否已经加入系统 Path。

3. 浏览器下载失败

可能与网络、代理、防火墙或缓存有关。

可以把完整错误日志交给 WorkBuddy，重点检查：

下载地址是否可以访问
系统代理是否生效
防火墙是否拦截
磁盘空间是否充足
浏览器缓存目录是否损坏

4. 视频有画面但没有声音

检查：

音频文件是否真实存在
HTML 中的文件路径是否正确
音频格式是否受支持
音频是否加入时间轴
渲染时 FFmpeg 是否检测到音轨

5. 字幕和配音不同步

不要只按照文字长度估算时间。

更可靠的方式是先生成音频，再读取真实音频时长，根据句子或时间戳安排字幕和动画。

6. 自己的声音不像

重点检查：

参考音频是否清晰
参考文本是否准确
是否选择了支持声音克隆的 Base 模型
音频中是否包含噪声、音乐或多人说话
桥接脚本是否正确传递参考音频

十四、这套方案适合谁？

这套工作流适合：

不熟悉命令行的内容创作者
想批量制作知识类视频的人
需要自动生成字幕和配音的人
希望减少在线视频工具费用的人
已经部署本地语音模型的用户
想用 HTML、CSS 和 JavaScript 制作动画的人

它的核心价值不是“完全不用配置”，而是让 AI Agent 帮助完成重复安装、脚本适配和错误排查，把视频生产流程从多个工具之间的手动切换，变成相对统一的自动化工作流。

总结

WorkBuddy、HyperFrames 和 Qwen3-TTS 分别解决了三个问题：

WorkBuddy：负责安装、执行和排错。
HyperFrames：负责把 HTML 动画渲染成 MP4。
Qwen3-TTS：负责本地语音生成和个人音色配音。

真正关键的环节，是根据本地 Qwen3-TTS 的真实接口编写桥接脚本，而不是简单复制一段固定代码。

完成桥接后，就可以形成一条相对完整的自动化流程：

输入视频主题
→ AI 生成脚本和 HTML 动画
→ Qwen3-TTS 生成配音
→ 自动生成字幕
→ HyperFrames 渲染 MP4

项目与官方地址

WorkBuddy 官方介绍：https://docs.cloudbase.net/ai/ai-tools/workbuddy
HyperFrames GitHub：https://github.com/heygen-com/hyperframes
HyperFrames 文档：https://hyperframes.heygen.com/
Qwen3-TTS GitHub：https://github.com/QwenLM/Qwen3-TTS

开源视频工具 on 拾光集

Remotion：用 React 批量生成固定栏目、排行榜和数据周报

Remotion 能做什么？

适合哪些内容？

为什么它能减少重复工作？

Remotion 的主要优势

使用前需要注意

总结

项目地址

video-use：把原始素材交给 AI，自动完成剪辑、字幕与调色

video-use 能做什么？

1. 自动删除停顿和口头禅

2. 自动生成并添加字幕

3. 自动调色和处理画面

4. 直接输出 MP4 视频

哪些人适合使用？

使用思路

总结

项目地址

HyperFrames：用一句提示词生成网页动画，并渲染为 MP4 视频

HyperFrames 是什么？

HyperFrames 可以做什么？

1. 制作产品宣传视频

2. 生成动态数据视频

3. 制作文字与字幕动画

4. 输出标准 MP4 文件

为什么适合 AI 编程助手？

基本使用流程

第一步：安装 HyperFrames Skill

第二步：让 AI 生成视频页面

第三步：浏览器预览

第四步：渲染 MP4

适合哪些用户？

总结

项目地址

WorkBuddy + HyperFrames 安装教程：接入本地 Qwen3-TTS，实现自己的声音自动配音

一、三个工具分别做什么？

WorkBuddy

HyperFrames

Qwen3-TTS

二、安装前需要准备什么？

三、安装 Node.js

四、安装 FFmpeg

五、安装 WorkBuddy

六、使用 WorkBuddy 安装 HyperFrames

七、运行环境体检

八、预览和渲染视频

九、接入本地 Qwen3-TTS

十、让 WorkBuddy 编写桥接脚本

十一、一个容易忽略的问题：接口格式不一定相同

十二、生成自己的声音配音

十三、常见问题

1. 找不到 hyperframes 命令

2. FFmpeg 已安装，但终端仍然找不到

3. 浏览器下载失败

4. 视频有画面但没有声音

5. 字幕和配音不同步

6. 自己的声音不像

十四、这套方案适合谁？

总结

项目与官方地址

1. 找不到 `hyperframes` 命令