展开本页目录
开始前准备什么
- Node.js 22以上、FFmpeg和可运行Chrome/Chromium；示例锁定HyperFrames 0.8.159。
- 先下载独立工程及输入，保留原文件，在副本中修改。
- 示例工程由本站编写，并用HyperFrames 0.8.159实际本地渲染。未调用Claude Code或远端文本/视频模型；读者可用随包提示词在自己的代理会话重做。三张商品输入由内置imagegen生成，非实物照片。
- 检查三张商品图的身份
- 只写输入能支持的卖点
- 把三张图各分配一幕
- 保持图片比例和可读文字区
- 逐幕检查商品一致性
- 导出30秒概念宣传片
- 回看开场、卖点和行动文字
- 替换为自己的商品与事实表
原创输入、八步教程、可编辑HyperFrames工程、实际MP4和核验记录。
明确本地实跑范围、图像/声音身份、命令和许可。
1280×720，30秒，24fps。
与正文图中事实、画面或时间点一一对应。
1. 检查三张商品图的身份
project/assets/product-1/2/3.png分别是正面、侧面与细节。三张均为内置imagegen生成的同一虚构计时器概念图，非实物摄影。先看刻度、外壳与金属边缘的一致性，再用于片子。
2. 只写输入能支持的卖点
打开product-facts.json，只保留陶瓷质感、金属旋转边缘、稀疏刻度外观。不填价格、续航、库存或精度。本题展示产品视觉组织，不能从生成照片推断真实机械性能。
3. 把三张图各分配一幕
0–10秒看主体比例，10–20秒看侧面材质，20–30秒看边缘细节与查看设计按钮。三幕各自解释一个问题，避免每张图都堆全部卖点。
4. 保持图片比例和可读文字区
在project/index.html检查object-fit:cover以及文字底板。主图允许轻微推进；侧面和细节仍要保留同一商品特征。若裁切后看不到卖点，改镜头，不用文案补造画面没有的细节。
5. 逐幕检查商品一致性
运行检查后在Studio定位4、14、24秒。对照三张源图，确认没有多出按钮、屏幕或品牌，左侧文字不遮住重要刻度；让移动幅度服务于看清产品。
bash
npx [email protected] check --json
npx [email protected] preview --background --no-open
6. 导出30秒概念宣传片
高质量导出后检查30秒、24fps与1280×720。随包MP4来自本题实际工程；图像生成与HTML转视频是两条独立过程，HyperFrames不会凭空把产品照片变成三维物体。
bash
npx [email protected] render --output ../my-output.mp4 --fps 24 --quality high --workers 2 --strict7. 回看开场、卖点和行动文字
依次暂停三个实际帧。开场先识别商品，中段辨认材质，片尾只引导查看设计细节；虚构教材不能伪装成真实在售商品或向读者收款。
8. 替换为自己的商品与事实表
复制工程再更换三张授权商品图和product-facts.json。若使用真实价格或商品参数，先核对来源日期；更换图片后重新审裁切、字幕和卖点，不沿用虚构素材的描述。
bash
python3 verify.py怎样确认已经完成
- 原始输入、事实表和成片中的文字/画面一致。
- Studio逐点预览后，核对实际MP4画幅、时长、fps及音轨。
- 练习包verify.py回读本题真实导出，不把它当作代理或外部模型可靠性证明。
常见问题
三张商品图做宣传片？
project/assets/product-1/2/3.png分别是正面、侧面与细节。三张均为内置imagegen生成的同一虚构计时器概念图，非实物摄影。先看刻度、外壳与金属边缘的一致性，再用于片子。 0–10秒看主体比例，10–20秒看侧面材质，20–30秒看边缘细节与查看设计按钮。三幕各自解释一个问题，避免每张图都堆全部卖点。
AI产品介绍视频怎么做？
运行检查后在Studio定位4、14、24秒。对照三张源图，确认没有多出按钮、屏幕或品牌，左侧文字不遮住重要刻度；让移动幅度服务于看清产品。
HyperFrames 商品宣传片需要付费API吗？
本例HTML到MP4在本地执行，不需要为HyperFrames本地渲染购买模型额度。自己的编码代理、可选配音/图像模型或云渲染可能另行收费；本页不把这些费用混成统一免费。