制作页面演示视频 是做什么的？
概述
页面本身已包含你能获得的最佳素材：它自己的实时运动动画。 工作在于忠实地捕获它，选择贯穿其中的路径，并验证结果。
核心原则：录制真实动画，切勿重新创建，并通过测量而非感觉进行编辑。
页面的录制就是一次导览。请明确说明。品牌影片是另一项工作：一个设计好的、带有故事板的动画电影。此技能适用于“我们构建的页面看起来和动起来是什么样子”。
录制前决策
- 视频要证明什么。 一句话。例如：“新页面自行构建并按设计滚动”。
- 哪个版本。 录制真实存在并已发布到审查环境的版本。绝不录制尚未发布的版本（未公布的产品页面、草稿），也绝不录制仍在修改中的原型。录制预演环境，而非本地构建版。
- 格式。 16:9 的 1920x1080 是原生桌面捕获且最安全。不要捏造团队未经 QA 过的竖屏布局。
- 时长。 简短。15 到 20 秒可展示整个页面的能力。5 秒可展示一个动作。确定视频需要哪一种。
- 禁止出现的内容。 客户标志、带姓名的引用语、第三方标记、占位符文本、损坏的图片、未经公布的声明。现在就列出这些内容。
- 分辨率。 在 1080p 下审查。在剪辑获得批准前，不要渲染 4K 母版。
步骤 1：录制真实动画
使用 Chrome 的 CDP screencast，而非逐帧截图。基于滚动值驱动的 GSAP、平滑滚动、canvas 轨迹和定时入场动画都依赖墙上时钟运行。逐帧步进会改变运动效果。
Page.startScreencast format jpeg, quality 100, maxWidth = viewport width, everyNthFrame 1
在 Apple Silicon 笔记本电脑上，这大约能提供每秒 60 帧（中位间隔 16.7 毫秒）。
- 加载时入场动画：先启动 screencast，然后重新加载页面，以便将入场动画包含在录制中。在重新加载前修剪掉之前的帧。
- 滚动：通过关键帧
[秒数, 位置]驱动滚动。将位置通过单调三次样条（无过冲，保持平直）传递，并使用平滑滚动库的scrollTo(y, { immediate: true, force: true })应用每个值，使页面自身的滚动和动画处理与读者体验完全一致。切勿手动动画化页面的元素。 - 隐藏而非移除：
visibility: hidden应用于标志和引用语，可保持固定布局的完整性。display: none会导致布局偏移。 - 时钟：在页面内部获取开始时间（
performance.timeOrigin + performance.now()），以便滚动关键帧和 screencast 时间戳共享同一时钟。 - 重采样为恒定帧率：输出帧
k显示在k / fps时刻或之前的最新 screencast 帧。
此仓库中的 video/capture.mjs 可通过一个简单的 JSON 计划完成所有这些操作。
步骤 2：通过测量选择路径
凭感觉选择的滚动路径会留下死区（鼠标滚动但屏幕无变化的区域）。找到它们：
- 对整个范围进行一次缓慢、稳定的扫描录制。
- 在其上运行
video/analyze.py。它会报告冻结运行（相同帧）和最大的帧间变化。 - 将冻结运行映射回滚动位置。这些就是死区：快速穿过它们。
- 给那些由滚动值驱动的场景（如圆圈变大、卡片构建、计数器计数）分配缓慢、可读的段落。这些场景跟随滚动，因此等待不会完成它们。
- 基于时间的动画在越过阈值时开始，需要真实时间完成。在最后一个动画完成前不要结束剪辑。
然后用调整后的路径录制真实镜头，并再次运行 analyze.py。固定场景内短暂的冻结运行是停留，可以接受。但闪烁过程中 0.4 秒的冻结则不行。
检查录制本身的健康状况：你将使用的片段中，screencast 帧之间的最大间隔应低于约 40 毫秒。更大的间隔表示卡顿，需重新录制。
步骤 3：挑选已完成素材
在确定剪辑内容前，每 0.5 到 1 秒查看一次联系人表。拒绝以下内容：
- 空卡片、损坏的图片、显示图片区域但只有替代文本的内容
- CMS 列表中的占位符文案
- 页面绘制时为空白的第一秒；修剪到标题开始出现的位置
- “禁止出现列表中”的任何内容
如果某个部分未完成，将其排除并通知负责人。包含破损卡片的视频相当于公开的 bug 报告。
步骤 4：编码并标记色彩空间
./encode.sh <framesDir> out.mp4 <firstFrame> <frameCount> 60
screencast 帧是全范围的 BT.601 JPEG。编码将其转换为有限范围的 BT.709 并标记流，以便播放器无需猜测：
scale=in_range=full:in_color_matrix=bt601:out_range=tv:out_color_matrix=bt709,format=yuv420p
libx264 -crf 14 -preset slow -x264-params colorprim=bt709:transfer=bt709:colormatrix=bt709:fullrange=off
-movflags +faststart
yuv420p 和 +faststart 使其在任意平台都能播放并立即开始。通过解码几帧并与源图像逐像素比较来验证结果。不要比较通道平均值：对几百万个 float32 值求平均会产生足够误差，从而虚构出不存在的色偏。每个通道约 3 个级别之差是可以接受的。
步骤 5：QA 视频
- 从文件中读取时长、帧率、尺寸和色彩标记
- 每秒钟抽查一帧画面，并以正常速度查看过渡效果
- 任何帧中均无标志、姓名、占位符、横幅或损坏图片（不仅仅是选定的帧）
- 无 Cookie 横幅或同意窗口，并且未曾点击过它们：通过页面自身的 CSS 隐藏它们，或录制不显示它们的环境
- 第一帧是关键。如果页面绘制时为空白，则修剪掉
- 选择一个页面完整且静止的海报帧（非滚动中）
然后运行 reviewing-page-design 中的冷门 Reviewer 门控检查。
步骤 6：说明你无法验证的内容
声音（若有）：“我听不到声音”。平台自身的重新压缩。任何在未测试设备上显示的内容。
当需要设计好的演示视频时
将页面素材组合到每一个视觉元素都作为时间函数（封闭形式的弹簧动画，每次一个叠加概念，两到五个字的字幕，品牌色仅用于名称和结束卡片）的布局中。应用相同规则：页面窗口绝不被遮挡，文本在 360 像素宽度下可读，结尾画面至少停留 1.2 秒。
警示标志
- 对滚动驱动页面使用逐帧截图捕获
- 录制仍在修改中的原型，或未发布的页面
- 包含未完成部分的演示视频
- 画面中出现客户标志或带姓名引用语
- 凭感觉选择的滚动路径，且没有后台扫描数据
- 通过通道平均值比较颜色
- 在剪辑批准前渲染 4K