展开本页目录
开始前准备什么
- Node.js 22以上、FFmpeg和可运行Chrome/Chromium；示例锁定HyperFrames 0.8.159。
- 先下载独立工程及输入，保留原文件，在副本中修改。
- 示例工程由本站编写，并用HyperFrames 0.8.159实际本地渲染。未调用Claude Code或远端文本/视频模型；读者可用随包提示词在自己的代理会话重做。输入为原创二维角色与本机语音，不是真人拍摄或克隆。
- 先区分原片、原声和信息卡
- 逐句确定图卡的出场时点
- 把原视频放在主根节点
- 给每条信息卡单独设开始与时长
- 在Studio核对原片与卡片
- 导出并核对音轨与时长
- 比较同一时刻的前后画面
- 保留可编辑时间表与整段原片
原创输入、八步教程、可编辑HyperFrames工程、实际MP4和核验记录。
明确本地实跑范围、图像/声音身份、命令和许可。
1280×720，18秒，24fps。
与正文图中事实、画面或时间点一一对应。
1. 先区分原片、原声和信息卡
本例input.mp4由本站原创二维成年角色与本机Tingting语音制作，简单嘴部启闭不代表数字人口型模型。下载speech.txt、speech-timing.json与cards.json；真实拍摄口播也可以用同样的包装步骤。
2. 逐句确定图卡的出场时点
三条卡分别在2.5、7、11.5秒出现，对应书店集合、小径慢行和雨天室内阅读。先听原片再查时间文本；图卡只能补充说话内容，不能把未提及的承诺写进去。
3. 把原视频放在主根节点
在project/index.html检查presenter-video直接位于composition root，并保留data-has-audio=true。不要先静音再用另一段语音替代；本题目标是在整段18秒原片上叠信息卡。
4. 给每条信息卡单独设开始与时长
每张卡保留4秒，放在左下可读区域。按实际视频调整位置，避免挡嘴、字幕或重要动作。本题三张卡是独立timed clip，不能用一个始终占满屏幕的大标题代替。
5. 在Studio核对原片与卡片
运行检查后看3.5、8.2、12.5秒，分别核对画面与对应信息卡，试听原声。若换自己的长口播，先重建真实时间表，不能直接套这三个时间点。
bash
npx [email protected] check --json
npx [email protected] preview --background --no-open
6. 导出并核对音轨与时长
导出后用ffprobe确认18秒、24fps且存在音轨。与input.mp4逐段对听，确认没有删掉原句、换声或重排；容器或编码重写不等于文件字节相同。
bash
npx [email protected] render --output ../my-output.mp4 --fps 24 --quality high --workers 2 --strict7. 比较同一时刻的前后画面
看本题实际输出与input.mp4同一帧：说话主体仍在原位置，只有信息卡增加。正文展示的角色是原创动画输入，读者可替换为自己有权使用的真人口播。
8. 保留可编辑时间表与整段原片
下载包中同时保留input.mp4、speech-timing.json、cards.json、工程与实际输出。后续修改文案先改图卡，再回听原句，不能让宣传文字偏离口播事实。
bash
python3 verify.py怎样确认已经完成
- 原始输入、事实表和成片中的文字/画面一致。
- Studio逐点预览后，核对实际MP4画幅、时长、fps及音轨。
- 练习包verify.py回读本题真实导出，不把它当作代理或外部模型可靠性证明。
常见问题
口播视频怎么加数据卡片？
本例input.mp4由本站原创二维成年角色与本机Tingting语音制作，简单嘴部启闭不代表数字人口型模型。下载speech.txt、speech-timing.json与cards.json；真实拍摄口播也可以用同样的包装步骤。 在project/index.html检查presenter-video直接位于composition root，并保留data-has-audio=true。不要先静音再用另一段语音替代；本题目标是在整段18秒原片上叠信息卡。
AI自动包装口播视频？
运行检查后看3.5、8.2、12.5秒，分别核对画面与对应信息卡，试听原声。若换自己的长口播，先重建真实时间表，不能直接套这三个时间点。
HyperFrames 口播包装需要付费API吗？
本例HTML到MP4在本地执行，不需要为HyperFrames本地渲染购买模型额度。自己的编码代理、可选配音/图像模型或云渲染可能另行收费；本页不把这些费用混成统一免费。