使用 Video
在拥有该会话的项目中创建、检查和修改 HyperFrames 视频合成。
Video 用于 HyperFrames 合成项目。视频产物归属当前会话,编辑入口固定为 video/<session-id>/index.html。这样可以避免设计会话或其他对话误编辑到错误的视频项目。
会话拥有可播放合成、时间线结构、变量和本地资产。
- 01脚本
定义信息、时长、画幅和场景顺序。
- 02合成
生成或打开会话视频入口与本地资产。
- 03变量
暴露可安全修改的文字、颜色、枚举或媒体输入。
- 04时间线
在 iPolloWork 管理的预览中检查与调整场景。
描述真实的视频目标
请提供可控制合成的条件,而不是只给出一个风格名称:
创建一个 12 秒的 16:9 发布视频。
使用三个场景:问题、产品动作、最后的行动号召。
标题和强调色必须可编辑。
使用 ./launch-assets 中的资产,且不要启动第二个浏览器预览服务。
声明合成变量
视频模板在根 HTML 元素上使用非空 data-composition-variables。这组变量是模板、Video Studio 与运行中合成之间的约定。
<html data-composition-variables='[
{"id":"title","type":"string","label":"Title","default":"Product Reveal"},
{"id":"accent","type":"color","label":"Accent","default":"#3a9fca"}
]'>
<body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="12">
<section id="scene-intro" data-start="0" data-duration="4">
<h1 data-var-text="title">Product Reveal</h1>
</section>
</div>
</body>
</html>
标量变量会成为合成根节点上的 CSS 变量。文字使用 data-var-text 绑定,媒体使用 data-var-src 绑定。enum 类型还必须声明允许的 options。
验证合成
在打包可复用视频模板前,在模板目录执行严格结构检查:
npx --yes hyperframes@0.7.52 check . --strict --at-transitions
保持资产位于合成包内,并使用由 iPolloWork 管理的嵌入式预览。随后可按 视频模板 将同一项目制作成 .ipwt 包。