HyperFrames实战：HTML转视频
HyperFrames是一个开源框架，用于将HTML、CSS、媒体和可寻址动画转换为确定性的MP4视频。通过本教程，您将学习如何使用HyperFrames创建视频，包括如何安装、使用CLI、与AI编码代理集成等。您还将了解如何使用HyperFrames的各种技能，包括创建产品推介视频、网站视频、解释性视频等。
1. 安装HyperFrames：使用CLI和AI编码代理
本章要解决的问题是如何安装HyperFrames，并使用CLI和AI编码代理来创建视频。通过本章，你将能够使用HyperFrames创建视频，并理解其基本原理。
首先，我们需要确保你已经安装了Node.js和npm。然后，我们可以开始安装HyperFrames。
npx skills add heygen-com/hyperframes --full-depth --yes这条命令将安装HyperFrames的技能，包括CLI和AI编码代理。--full-depth参数确保我们获取的是最新的版本，而不是几个小时前的旧版本。
安装完成后，我们可以使用以下命令来验证是否安装成功：
npx hyperframes --version如果一切正常，你应该可以看到HyperFrames的版本号。
接下来，我们可以使用AI编码代理来创建视频。首先，我们需要描述我们想要创建的视频。例如：
使用
/hyperframes，创建一个 10 秒的产品介绍视频，包含一个淡入的标题、一个背景视频和微妙的背景音乐。
然后，我们可以使用以下命令来创建视频：
npx hyperframes create --prompt "使用 /hyperframes，创建一个 10 秒的产品介绍视频，包含一个淡入的标题、一个背景视频和微妙的背景音乐。"这条命令将创建一个新的视频项目，并使用AI编码代理来生成视频。
如果你遇到任何错误或问题，可以检查以下几点：
- 是否正确安装了HyperFrames和相关依赖？
- 是否正确配置了AI编码代理？
- 是否正确描述了视频的内容和要求？
本章小结
- 安装HyperFrames使用
npx skills add heygen-com/hyperframes --full-depth --yes命令。 - 验证HyperFrames版本使用
npx hyperframes --version命令。 - 使用AI编码代理创建视频，需要描述视频的内容和要求。
- 可能遇到的错误或问题，需要检查安装、配置和描述的正确性。
2. 创建第一个视频：使用HyperFrames的快速入门
创建第一个视频：使用HyperFrames的快速入门
现在我们已经安装了HyperFrames，并验证了其版本号，我们可以开始创建第一个视频了。我们将使用HyperFrames的快速入门功能来创建一个简单的视频。
步骤1：创建一个新项目
首先，我们需要创建一个新项目。我们可以使用以下命令来创建一个新项目：
npx hyperframes init my-first-video这条命令将创建一个新的项目目录，名为my-first-video。
步骤2：编辑项目文件
接下来，我们需要编辑项目文件。我们可以使用以下命令来打开项目目录：
cd my-first-video然后，我们可以编辑index.html文件来添加视频内容。例如，我们可以添加一个标题、一个背景视频和一些文本：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个视频</title>
</head>
<body>
<h1>我的第一个视频</h1>
<video src="background.mp4" autoplay loop></video>
<p>这是我的第一个视频，使用HyperFrames创建。</p>
</body>
</html>步骤3：渲染视频
现在我们已经编辑好了项目文件，我们可以使用以下命令来渲染视频：
npx hyperframes render这条命令将渲染视频，并生成一个output.mp4文件。
预期结果
如果一切正常，我们应该可以看到一个渲染好的视频文件，名为output.mp4。我们可以使用任何视频播放器来播放这个文件。
常见问题
- 如果你遇到错误或问题，可以检查以下几点：
- 是否正确安装了HyperFrames和相关依赖？
- 是否正确配置了项目文件？
- 是否正确渲染了视频？
小结
- 创建一个新项目使用
npx hyperframes init命令。 - 编辑项目文件来添加视频内容。
- 渲染视频使用
npx hyperframes render命令。 - 预期结果是生成一个渲染好的视频文件。
3. HyperFrames的技能：了解路由器和能力映射
HyperFrames的技能是其强大的功能之一，能够让我们轻松地创建各种类型的视频。要了解路由器和能力映射，我们需要先了解HyperFrames的基本架构。
首先，我们需要了解HyperFrames的CLI命令。我们可以使用以下命令来查看可用的技能：
npx hyperframes skills这条命令将列出所有可用的技能，包括 /hyperframes、 /product-launch-video、 /website-to-video 等。
路由器
路由器是HyperFrames中的一种特殊技能，能够将输入的HTML文件转换为特定的视频类型。我们可以使用以下命令来查看路由器的信息：
npx hyperframes router这条命令将显示路由器的信息，包括其支持的视频类型和参数。
能力映射
能力映射是HyperFrames中的一种机制，能够将技能映射到特定的视频类型。我们可以使用以下命令来查看能力映射的信息：
npx hyperframes capabilities这条命令将显示能力映射的信息，包括其支持的视频类型和参数。
示例
假设我们想要创建一个产品推介视频，我们可以使用 /product-launch-video 技能。我们可以使用以下命令来创建一个新的项目：
npx hyperframes init --skill /product-launch-video这条命令将创建一个新的项目，包含 /product-launch-video 技能的基本文件。
接着，我们可以编辑项目文件来添加视频内容。例如，我们可以添加一个标题、一个描述和一些图片：
<!DOCTYPE html>
<html>
<head>
<title>产品推介</title>
</head>
<body>
<h1>产品推介</h1>
<p>这是一个产品推介视频。</p>
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
</body>
</html>然后，我们可以使用以下命令来渲染视频：
npx hyperframes render这条命令将渲染视频，并生成一个 output.mp4 文件。
常见问题
- 如果你遇到错误或问题，可以检查以下几点：
- 是否正确安装了HyperFrames和相关依赖？
- 是否正确配置了项目文件？
- 是否正确渲染了视频？
本章小结
- HyperFrames的技能是其强大的功能之一，能够让我们轻松地创建各种类型的视频。
- 路由器是HyperFrames中的一种特殊技能，能够将输入的HTML文件转换为特定的视频类型。
- 能力映射是HyperFrames中的一种机制，能够将技能映射到特定的视频类型。
- 我们可以使用CLI命令来查看可用的技能、路由器和能力映射的信息。
4. 创建产品推介视频：使用/hyperframes和/product-launch-video技能
要创建一个产品推介视频，我们需要使用 /hyperframes 和 /product-launch-video 两个技能。首先，我们需要创建一个 HTML 文件作为视频内容的基础。假设我们已经有一个基本的 HTML 文件，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>产品推介</title>
</head>
<body>
<h1>产品推介</h1>
<p>这是一个产品推介视频。</p>
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
</body>
</html>接下来，我们需要使用 /hyperframes 技能来渲染视频。我们可以使用以下命令来渲染视频：
npx hyperframes render --skill /product-launch-video这条命令将渲染视频，并生成一个 output.mp4 文件。
如果你遇到错误或问题，可以检查以下几点：
- 是否正确安装了 HyperFrames 和相关依赖？
- 是否正确配置了项目文件？
- 是否正确渲染了视频？
在渲染视频的过程中，HyperFrames 将自动应用 /product-launch-video 技能来创建一个产品推介视频。你可以通过以下命令来查看可用的技能和路由器的信息：
npx hyperframes skills这条命令将输出可用的技能和路由器的列表。
本章小结
- 我们可以使用
/hyperframes和/product-launch-video两个技能来创建一个产品推介视频。 - HyperFrames 的技能是其强大的功能之一，能够让我们轻松地创建各种类型的视频。
- 我们可以使用 CLI 命令来渲染视频和查看可用的技能和路由器的信息。
5. 创建网站视频：使用/website-to-video技能
我们要创建一个网站视频，使用 /website-to-video 技能。首先，确保你已经安装了 HyperFrames 和相关依赖。
直接跑以下命令来安装 /website-to-video 技能：
npx skills add heygen-com/hyperframes --skill /website-to-video --full-depth这条命令将安装 /website-to-video 技能和相关依赖。
接着，我们需要配置项目文件。创建一个 index.html 文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<title>网站视频</title>
</head>
<body>
<h1>网站视频</h1>
<p>这是一个网站视频的示例。</p>
</body>
</html>现在，我们可以使用以下命令来渲染视频：
npx hyperframes render --skill /website-to-video这条命令将渲染视频，并生成一个 output.mp4 文件。
如果你遇到错误或问题，可以检查以下几点：
- 是否正确安装了 HyperFrames 和相关依赖？
- 是否正确配置了项目文件？
- 是否正确渲染了视频？
在渲染视频的过程中，HyperFrames 将自动应用 /website-to-video 技能来创建一个网站视频。你可以通过以下命令来查看可用的技能和路由器的信息：
npx hyperframes skills这条命令将输出可用的技能和路由器的列表。
本章小结
- 我们可以使用
/website-to-video技能来创建一个网站视频。 - HyperFrames 的技能是其强大的功能之一，能够让我们轻松地创建各种类型的视频。
- 我们可以使用 CLI 命令来渲染视频和查看可用的技能和路由器的信息。
6. 创建解释性视频：使用/faceless-explainer技能
我们要创建一个解释性视频，使用 /faceless-explainer 技能。首先，确保你已经安装了 HyperFrames 和相关依赖。
直接跑以下命令来添加 /faceless-explainer 技能：
npx skills add heygen-com/hyperframes --skill /faceless-explainer --full-depth这条命令将安装 /faceless-explainer 技能。
接着，创建一个 HTML 文件，例如 index.html，添加以下内容：
<!DOCTYPE html>
<html>
<head>
<title>解释性视频</title>
</head>
<body>
<h1>解释性视频</h1>
<p>这是一个解释性视频的示例。</p>
</body>
</html>然后，使用以下命令来渲染视频：
npx hyperframes render --skill /faceless-explainer这条命令将渲染视频，并生成一个 output.mp4 文件。
如果你遇到错误或问题，可以检查以下几点：
- 是否正确安装了 HyperFrames 和相关依赖？
- 是否正确配置了项目文件？
- 是否正确渲染了视频？
记住一点： /faceless-explainer 技能可以从任意文本创建解释性视频，所以你可以尝试使用不同的文本来创建不同的视频。
本章小结
- 我们可以使用
/faceless-explainer技能来创建解释性视频。 - HyperFrames 的技能可以让我们轻松地创建各种类型的视频。
- 我们可以使用 CLI 命令来渲染视频和查看可用的技能和路由器的信息。
7. 添加字幕和图形叠加：使用/embedded-captions和/talking-head-recut技能
现在我们要添加字幕和图形叠加到视频中。首先，安装 /embedded-captions 和 /talking-head-recut 技能：
npx hyperframes install /embedded-captions
npx hyperframes install /talking-head-recut这两个命令将安装添加字幕和图形叠加的技能。
接着，创建一个新的 HTML 文件，例如 captions.html，添加以下内容：
<!DOCTYPE html>
<html>
<head>
<title>添加字幕和图形叠加</title>
</head>
<body>
<h1>添加字幕和图形叠加</h1>
<p>这是一个添加字幕和图形叠加的示例。</p>
<video id="video" width="640" height="480" controls>
<source src="output.mp4" type="video/mp4">
</video>
<script>
// 添加字幕
const video = document.getElementById('video');
const captions = [
{ text: '这是第一个字幕', startTime: 0, endTime: 2 },
{ text: '这是第二个字幕', startTime: 3, endTime: 5 },
];
video.addEventListener('timeupdate', () => {
const currentTime = video.currentTime;
captions.forEach((caption) => {
if (currentTime >= caption.startTime && currentTime <= caption.endTime) {
console.log(caption.text);
}
});
});
</script>
</body>
</html>这个 HTML 文件包含一个视频元素和一个脚本，用于添加字幕。
然后，使用以下命令来渲染视频：
npx hyperframes render --skill /embedded-captions --input captions.html这条命令将渲染视频，并生成一个 output.mp4 文件，包含添加的字幕。
如果你想要添加图形叠加，可以使用 /talking-head-recut 技能。创建一个新的 HTML 文件，例如 overlays.html，添加以下内容：
<!DOCTYPE html>
<html>
<head>
<title>添加图形叠加</title>
</head>
<body>
<h1>添加图形叠加</h1>
<p>这是一个添加图形叠加的示例。</p>
<video id="video" width="640" height="480" controls>
<source src="output.mp4" type="video/mp4">
</video>
<script>
// 添加图形叠加
const video = document.getElementById('video');
const overlays = [
{ text: '这是第一个图形叠加', startTime: 0, endTime: 2, x: 10, y: 10 },
{ text: '这是第二个图形叠加', startTime: 3, endTime: 5, x: 20, y: 20 },
];
video.addEventListener('timeupdate', () => {
const currentTime = video.currentTime;
overlays.forEach((overlay) => {
if (currentTime >= overlay.startTime && currentTime <= overlay.endTime) {
console.log(overlay.text);
}
});
});
</script>
</body>
</html>这个 HTML 文件包含一个视频元素和一个脚本，用于添加图形叠加。
然后，使用以下命令来渲染视频：
npx hyperframes render --skill /talking-head-recut --input overlays.html这条命令将渲染视频，并生成一个 output.mp4 文件，包含添加的图形叠加。
记住一点： /embedded-captions 和 /talking-head-recut 技能可以让你轻松地添加字幕和图形叠加到视频中。
本章小结
- 我们可以使用
/embedded-captions技能来添加字幕到视频中。 - 我们可以使用
/talking-head-recut技能来添加图形叠加到视频中。 - HyperFrames 的技能可以让我们轻松地创建各种类型的视频，并添加字幕和图形叠加。
8. 创建动态图形：使用/motion-graphics技能
要创建动态图形，我们需要使用 /motion-graphics 技能。这个技能可以帮助我们创建短小的、设计为主的动态图形，例如动态文字、统计图表、Logo 动画等。
首先，我们需要安装 /motion-graphics 技能。可以使用以下命令：
npx skills add heygen-com/hyperframes --skill /motion-graphics --full-depth这条命令将安装 /motion-graphics 技能及其依赖项。
接着，我们可以使用以下命令来渲染动态图形：
npx hyperframes render --skill /motion-graphics --input motion-graphics.html这里，motion-graphics.html 是我们创建的 HTML 文件，包含动态图形的设计和动画。
如果我们想要创建一个简单的动态文字效果，我们可以在 motion-graphics.html 文件中添加以下代码：
<div style="font-size: 48px; font-weight: bold; animation: fade-in 2s;">
动态文字
</div>
<style>
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>这段代码将创建一个动态文字效果，文字从透明逐渐变为不透明。
如果我们遇到渲染错误，可以检查以下几点：
- 是否正确安装了
/motion-graphics技能 - 是否正确配置了 HTML 文件
- 是否正确使用了渲染命令
本章小结
- 我们可以使用
/motion-graphics技能来创建动态图形 /motion-graphics技能可以帮助我们创建短小的、设计为主的动态图形- 我们需要正确安装和配置
/motion-graphics技能，才能成功渲染动态图形
9. 创建音乐视频：使用/music-to-video技能
我们要创建一个音乐视频。首先，需要安装 /music-to-video 技能：
npx skills add heygen-com/hyperframes --skill music-to-video --full-depth这条命令会安装 /music-to-video 技能，用于创建音乐视频。
接着，我们需要创建一个 HTML 文件，包含音乐视频的设计和动画。例如，我们可以创建一个 music-video.html 文件，包含以下代码：
<div style="width: 100%; height: 100%; background-color: #000;">
<audio src="music.mp3" autoplay loop></audio>
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<h1 style="font-size: 48px; font-weight: bold; color: #fff; animation: beat-sync 2s infinite;">
音乐视频
</h1>
</div>
</div>
<style>
@keyframes beat-sync {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>这段代码会创建一个音乐视频，背景色为黑色，音乐文件为 music.mp3，标题为 "音乐视频"，并且有一个 beat-sync 动画效果。
如果我们遇到渲染错误，可以检查以下几点：
- 是否正确安装了
/music-to-video技能 - 是否正确配置了 HTML 文件
- 是否正确使用了渲染命令
我们可以使用以下命令来渲染音乐视频：
npx hyperframes render music-video.html --skill music-to-video这条命令会渲染 music-video.html 文件，生成一个音乐视频。
本章小结
- 我们可以使用
/music-to-video技能来创建音乐视频 /music-to-video技能可以帮助我们创建 beat-sync 的音乐视频- 我们需要正确安装和配置
/music-to-video技能，才能成功渲染音乐视频
10. 创建幻灯片：使用/slideshow技能
我们现在要创建一个幻灯片，使用 /slideshow 技能。首先，确保你已经安装了 HyperFrames 和 /slideshow 技能：
npx skills add heygen-com/hyperframes --full-depth --yes
npx skills add heygen-com/hyperframes --skill slideshow --full-depth接着，创建一个 HTML 文件，例如 slideshow.html，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>幻灯片</title>
<style>
/* 添加样式 */
</style>
</head>
<body>
<div class="slide">
<h1>幻灯片 1</h1>
<p>内容 1</p>
</div>
<div class="slide">
<h1>幻灯片 2</h1>
<p>内容 2</p>
</div>
</body>
</html>现在，使用以下命令渲染幻灯片：
npx hyperframes render slideshow.html --skill slideshow这条命令会渲染 slideshow.html 文件，生成一个幻灯片视频。
如果你遇到渲染错误，可以检查以下几点：
- 是否正确安装了
/slideshow技能 - 是否正确配置了 HTML 文件
- 是否正确使用了渲染命令
本章小结
- 我们可以使用
/slideshow技能来创建幻灯片 /slideshow技能可以帮助我们创建一个带有多个幻灯片的视频- 我们需要正确安装和配置
/slideshow技能，才能成功渲染幻灯片视频
11. 创建通用视频：使用/general-video技能
现在，我们要创建一个通用视频，使用 /general-video 技能。首先，确保你已经安装了 HyperFrames 和相关技能：
npx skills add heygen-com/hyperframes --full-depth --yes接着，创建一个 HTML 文件，例如 general-video.html，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>通用视频</title>
<style>
/* 添加样式 */
</style>
</head>
<body>
<h1>通用视频标题</h1>
<p>通用视频内容</p>
</body>
</html>然后，使用以下命令渲染通用视频：
npx hyperframes render general-video.html --skill general-video这条命令会渲染 general-video.html 文件，生成一个通用视频。
如果你遇到渲染错误，可以检查以下几点：
- 是否正确安装了
/general-video技能 - 是否正确配置了 HTML 文件
- 是否正确使用了渲染命令
记住一点， /general-video 技能可以帮助你创建一个通用视频，包含多种媒体元素和动画效果。要成功渲染通用视频，需要正确安装和配置 /general-video 技能。
本章小结
- 我们可以使用
/general-video技能来创建通用视频 /general-video技能可以帮助我们创建一个包含多种媒体元素和动画效果的视频- 我们需要正确安装和配置
/general-video技能，才能成功渲染通用视频
12. 将Remotion组合移植到HyperFrames：使用/remotion-to-hyperframes技能
要将Remotion组合移植到HyperFrames，我们需要使用 /remotion-to-hyperframes 技能。首先，确保你已经安装了 HyperFrames 和 /remotion-to-hyperframes 技能：
npm install @hyperframes/cli
npx hyperframes install remotion-to-hyperframes接着，创建一个新的 HTML 文件，例如 remotion-to-hyperframes.html，并添加 Remotion 组合的代码：
<html>
<head>
<title>Remotion 组合</title>
</head>
<body>
</body>
</html>然后，使用以下命令渲染 Remotion 组合：
npx hyperframes render remotion-to-hyperframes.html --skill remotion-to-hyperframes这条命令会渲染 remotion-to-hyperframes.html 文件，生成一个包含 Remotion 组合的视频。
如果你遇到渲染错误，可以检查以下几点：
- 是否正确安装了
/remotion-to-hyperframes技能 - 是否正确配置了 HTML 文件
- 是否正确使用了渲染命令
记住一点， /remotion-to-hyperframes 技能可以帮助你将 Remotion 组合移植到 HyperFrames，生成一个包含多种媒体元素和动画效果的视频。要成功渲染 Remotion 组合，需要正确安装和配置 /remotion-to-hyperframes 技能。
本章小结
- 我们可以使用
/remotion-to-hyperframes技能将 Remotion 组合移植到 HyperFrames /remotion-to-hyperframes技能可以帮助我们生成一个包含多种媒体元素和动画效果的视频- 我们需要正确安装和配置
/remotion-to-hyperframes技能，才能成功渲染 Remotion 组合
FAQ
问题：如何快速开始使用 HyperFrames？
快速开始使用 HyperFrames，可以访问 Quickstart 页面，按照指引安装所需的技能和依赖，然后使用 AI 编码代理描述您想要创建的视频。
问题：HyperFrames 的主要功能是什么？
HyperFrames 是一个开源框架，用于将 HTML、CSS、媒体和可寻址动画转换为确定性的 MP4 视频。它可以用于创建各种类型的视频，包括产品介绍、解释视频、动画和更多。
问题：如何安装 HyperFrames 的技能？
可以使用 npx skills add heygen-com/hyperframes --full-depth 命令安装 HyperFrames 的技能，这将安装当前的主分支的技能。如果您只想安装特定的技能，可以使用 npx skills add heygen-com/hyperframes --skill <name> --full-depth 命令。
问题：HyperFrames 与其他视频创建工具相比有什么优势？
HyperFrames 的优势在于它可以使用 HTML、CSS 和 JavaScript 来创建视频，这使得开发人员可以使用他们熟悉的技术来创建复杂的视频。另外，HyperFrames 还支持使用 AI 编码代理来自动创建视频。
问题：如何使用 HyperFrames 创建视频？
使用 HyperFrames 创建视频，可以使用 AI 编码代理描述您想要创建的视频，然后使用 HyperFrames 的技能来生成视频。您也可以使用 HyperFrames 的命令行工具来创建和渲染视频。
问题：HyperFrames 支持哪些类型的视频创建？
HyperFrames 支持创建各种类型的视频，包括产品介绍、解释视频、动画、音乐视频、幻灯片和更多。它还支持添加字幕、图形叠加和其他高级功能。
问题：如何解决 HyperFrames 安装和使用过程中的常见问题？
如果您在安装和使用 HyperFrames 过程中遇到问题，可以参考 Docs 页面来获取更多信息和帮助。您也可以加入 Discord 社区来获取支持和反馈。
