展开本页目录
开始前准备什么
- Node.js 22以上、FFmpeg和可运行Chrome/Chromium；示例锁定HyperFrames 0.8.159。
- 先下载独立工程及输入，保留原文件，在副本中修改。
- 示例工程由本站编写，并用HyperFrames 0.8.159实际本地渲染。未调用Claude Code或远端文本/视频模型；读者可用随包提示词在自己的代理会话重做。
- 先打开真正能操作的活动页
- 决定20秒只讲哪三个状态
- 拍摄这三种真实页面状态
- 把截图放进可编辑镜头
- 在Studio回看导览逻辑
- 导出20秒网站介绍视频
- 用成片检查字号与节奏
- 把它替换成自己的网页
原创输入、八步教程、可编辑HyperFrames工程、实际MP4和核验记录。
明确本地实跑范围、图像/声音身份、命令和许可。
1280×720，20秒，24fps。
与正文图中事实、画面或时间点一一对应。
1. 先打开真正能操作的活动页
用浏览器打开website/index.html。它是原创虚构慢行活动页，包含首屏、三个行程点和可展开的雨天FAQ；不采集报名或付款。先点击按钮和FAQ，确认页面实际状态与导览内容对应。
2. 决定20秒只讲哪三个状态
按首屏6秒、路线7秒、雨天FAQ7秒拆分。不要只把整页长截图缩小到读不清；页面滚动后要重新拍到当前区域，展开项的文字也要完整。
3. 拍摄这三种真实页面状态
本站示例通过实际浏览器操作取得site-hero.png、site-plan.png和site-faq.png，已放在project/assets。更换为自己的网页时，同样拍首屏、关键操作和操作后的结果；不把手写网页说成第三方网站截图。
4. 把截图放进可编辑镜头
检查project/index.html三个scene的img路径。右侧保留真实页面，左侧只解释当前镜头的目的；图片使用contain保证文字与按钮不被裁走。若网页更长，拆分镜头，不放大模糊截图。
5. 在Studio回看导览逻辑
运行检查后进入Studio，定位3、9、17秒。确认第一幕有路线入口、第二幕能看清三个时间点、最后一幕真的展开了雨天方案。这里只录入真实页面状态，不生成不存在的功能。
bash
npx [email protected] check --json
npx [email protected] preview --background --no-open
6. 导出20秒网站介绍视频
在project目录导出，核对1280×720、24fps、20秒。把输出同website/index.html对照：按钮名称、日期和FAQ必须一致；网页后续改版时也要更新片子。
bash
npx [email protected] render --output ../my-output.mp4 --fps 24 --quality high --workers 2 --strict7. 用成片检查字号与节奏
看随包实际MP4的三段镜头，暂停后应能读出当前关键信息。旁白、字幕可以在自己的项目加，但要重新安排时长；不能把文字密度翻倍而保留原来的6秒。
8. 把它替换成自己的网页
先确认有权录制并公开该页面，保留自己的截图和原页面副本。可用HyperFrames官方capture工作流新建另一个工程，也可以沿用本例三状态截图法；本例没有冒称已执行capture自动建片。
bash
python3 verify.py怎样确认已经完成
- 原始输入、事实表和成片中的文字/画面一致。
- Studio逐点预览后，核对实际MP4画幅、时长、fps及音轨。
- 练习包verify.py回读本题真实导出，不把它当作代理或外部模型可靠性证明。
常见问题
输入网址自动做介绍视频？
用浏览器打开website/index.html。它是原创虚构慢行活动页，包含首屏、三个行程点和可展开的雨天FAQ；不采集报名或付款。先点击按钮和FAQ，确认页面实际状态与导览内容对应。 本站示例通过实际浏览器操作取得site-hero.png、site-plan.png和site-faq.png，已放在project/assets。更换为自己的网页时，同样拍首屏、关键操作和操作后的结果；不把手写网页说成第三方网站截图。
AI网站演示短片？
运行检查后进入Studio，定位3、9、17秒。确认第一幕有路线入口、第二幕能看清三个时间点、最后一幕真的展开了雨天方案。这里只录入真实页面状态，不生成不存在的功能。
HyperFrames 网站转视频需要付费API吗？
本例HTML到MP4在本地执行，不需要为HyperFrames本地渲染购买模型额度。自己的编码代理、可选配音/图像模型或云渲染可能另行收费；本页不把这些费用混成统一免费。