# 使用 HyperFrames 生成视频的完整指南

原创 yabohe yabohe yablog
2026年4月19日 18:51 上海
在小说阅读器读本章
去阅读
在小说阅读器中沉浸阅读
HyperFrames 是一个 用 HTML 制作视频 的开源框架。核心理念：HTML 是视频的源码，用 data-* 属性控制时间轴，GSAP 做动画，CSS 做样式，最终渲染为 MP4/WebM 视频。
使用 HyperFrames 生成视频的流程分为下面五步：

1. init（初始化项目）
2. 编写 HTML 合成
3. lint（检查）
4. preview（预览）
5. render（渲染视频）

第 1 步：初始化项目

    # 交互式向导npx hyperframes init my-video     # 从模板创建                   npx hyperframes init my-video --example warm-grain# 带视频素材   npx hyperframes init my-video --video clip.mp4# 带音频素材       npx hyperframes init my-video --audio track.mp3

可选模板有：blank, warm-grain, swiss-grid, kinetic-type, product-promo 等。

第 2 步：编写 HTML 合成

这是 hyperframes skill 的核心。

一个视频合成就是一个 HTML 文件，其核心结构如下：

其中关键 data 属性说明为：

第 3 步：检查

    # 检查语法错误npx hyperframes lint# 显示详细信息npx hyperframes lint --verbose

第 4 步：预览

    # 浏览器中实时预览，支持热重载npx hyperframes preview

第 5 步：渲染为视频

    # 标准 MP4npx hyperframes render# 快速草稿（迭代用）npx hyperframes render --quality draft# 高质量最终输出npx hyperframes render --fps 60 --quality high# 透明背景 WebMnpx hyperframes render --format webm# 指定输出文件名npx hyperframes render --output final.mp4

其他额外能力：

    # 语音转文字（字幕）npx hyperframes transcribe audio.mp3npx hyperframes transcribe video.mp4 --model medium.en
    # 文字转语音（旁白）npx hyperframes tts "你的文本" --voice af_nova --output narration.wav# 查看所有可用声音npx hyperframes tts --list

更多原理方面的内容可阅读：Agent也可以剪视频了：只需要安装这个skill

References

- https://github.com/heygen-com/hyperframes

预览时标签不可点

微信扫一扫赞赏作者喜欢作者

0人付费

正在加载...

正在加载...
系统错误，请稍后重试
名称已清空
微信扫一扫赞赏作者
喜欢作者其它金额
赞赏后展示我的头像
作品
暂无作品
喜欢作者
其它金额
¥
最低赞赏 ¥0
其它金额
赞赏金额
¥
最低赞赏 ¥0
1
2
3
4
5
6
7
8
9
0
.

#

搜索「」网络结果

调整当前正文文字大小
100%
​

留言

暂无留言

1条留言
已无更多数据
发消息
写留言:

微信扫一扫
关注该公众号

继续滑动看下一个
yablog
向上滑动看下一个

当前内容可能存在未经审核的第三方商业营销信息，请确认是否继续访问。

继续访问取消
微信公众平台广告规范指引

知道了
微信扫一扫
使用小程序
取消 允许
取消 允许
取消 允许

微信扫一扫可打开此内容，
使用完整服务

yablog
： ， ， ， ， ， ， ， ， ， ， ， ， 。 视频 小程序 赞 ，轻点两下取消赞 在看 ，轻点两下取消在看 分享 留言 收藏 听过
可在「公众号 > 右上角 > 划线」找到划线过的内容
我知道了
,
,
选择留言身份
留言

暂无留言

1条留言
已无更多数据
发消息
写留言:

## 确认提交投诉

你可以补充投诉原因（选填）

确定