文档中心

AI MediaKit

基础剪辑

HyperFrames 云端渲染

HyperFrames 是一种将 HTML/CSS 动画工程确定性地渲染为视频的方案：动画效果以 HTML、CSS 和 JavaScript 编写，再逐帧渲染、编码为视频，同一份工程在任意环境都能渲染出一致的画面。AI MediaKit 的 HyperFrames 云端渲染工具将这一渲染过程搬到云端——您只需将 HyperFrames 工程打包为 ZIP 并提交任务，即可在云端稳定、高效地渲染合成视频，免去自行部署和维护渲染环境的成本。您可以按需设置输出格式、帧率、码率和渲染质量，并保留透明通道。

该工具适用于为口播、探盘等视频生成片头动画、章节标题、产品介绍片段，也可用于培训课程、活动宣传、品牌视频和旅行记录的动态图文包装。

快速体验

本节通过一个完整示例，演示如何提交一个 HyperFrames 工程，并获取渲染后的视频。

准备工作

获取访问凭证：前往 AI MediaKit 控制台 API Key 管理页面，创建并获取您的 AI MediaKit API Key。

准备 HyperFrames 工程 ZIP 包地址：将 HyperFrames 工程打包为 ZIP 包，并确保其结构符合 HyperFrames 工程包要求。将 ZIP 包上传至公网可访问的服务器，获取可供 API 调用的资源地址。

操作流程

HyperFrames 云端渲染是一个异步任务，调用 API 的整体流程如下：

成功调用 POST /api/v1/tools/hyperframes-to-video 提交任务后，您将获得一个唯一的 task_id。

通过轮询查询任务信息 API 查询任务状态，直到 status 变为 completed；您也可以配置事件回调自动接收任务状态变化。

任务完成后，从响应的 result 字段中获取渲染产物地址 video_url。

第 1 步：提交任务

您需要调用提交 HyperFrames 云端渲染任务 API。可直接复制以下 cURL 命令，提交一个将工程渲染为 30 FPS、标准质量 MP4 视频的基础任务。

说明

将 {Your_API_Key} 替换为您的有效 API Key。

将 bundle_url 的值替换为您自己准备的工程资源包地址。

请求成功后，您会收到如下包含 task_id 的响应，请保存此 ID 用于后续查询：

第 2 步：获取结果

由于渲染需要一些时间，您需要轮询查询任务信息 API，直到任务状态 status 变为 completed。

说明

将 URL 末尾的 {task_id} 替换为第 1 步返回的任务 ID。

当任务成功完成后，您将收到如下响应。result 字段中的 video_url 即是渲染产物的下载地址，同时返回产物的时长和分辨率：

进阶使用

您可以通过一些可选参数，对渲染质量、编码、输出格式和透明通道进行精细化控制。

调整渲染质量和编码参数

quality：渲染质量档位，可选 draft、standard、high，默认值为 standard。需要快速预览时可使用 draft 以缩短渲染时间，最终出片可使用 high 获得更好的画质。

bitrate：目标平均码率，单位为 kbps，取值范围为 10 至 150000。

fps：输出帧率，取值范围为 1 至 60，默认值为 30。

以下示例在快速体验的基础上，将工程渲染为 60 FPS、高质量、平均码率为 8000 kbps 的 MP4 视频：

输出透明背景

当您需要将渲染结果叠加到其他画面上（如虚拟背景、动态贴纸）时，可将 alpha 设为 true 保留透明通道。此时 format 只能设置为 webm、mov 或 gif。

参考信息

HyperFrames 工程包要求

您需要将完整的 HyperFrames 视频工程打包为一个 ZIP 包。您可以自行编写打包脚本，打包时需满足以下要求：

入口文件：入口文件必须命名为 index.html，且位于 ZIP 包的根目录下。若文件名不符或入口文件不在根目录，云端将无法识别工程。

资源文件：工程依赖的全部资源都需要一并打包，并在工程中通过相对路径引用。

在线脚本：工程依赖的在线 JavaScript 脚本，建议下载到本地后随工程一起打包并以相对路径引入，避免渲染时因外部网络不可达而失败。

媒体资源：图片、视频、音频等媒体文件需一并打包，并以相对路径引入。

排除无关文件：打包时请排除 node_modules、.git 等与渲染无关的目录，以减小资源包体积。

打包完成后，您可以执行以下命令快速校验包结构：

若输出列表中的 index.html 不带任何前缀路径，说明入口文件位于根目录，结构正确。以下为一个结构正确的工程包示例，index.html 位于根目录，媒体与第三方脚本均打包在工程内：