用网页技术生成视频的自动化流程

网页生成视频可以按生产链路处理。

先把需求写成可执行约束，再用网页生成画面，用浏览器跑动画，用自动化脚本控制动作，用采集工具取帧，最后用编码器输出视频。

flowchart LR
  A[需求约束] --> B[网页画面]
  B --> C[浏览器状态]
  C --> D[自动化控制]
  D --> E[帧采集]
  E --> F[视频编码]
  F --> G[验收]

需求怎么给 AI

给 AI 的信息要能落到画面和动作。

视频规格先定下来。画幅、分辨率、时长、帧率、输出格式会影响布局、动画速度和编码参数。

素材来源也要说清。线上网站要处理加载、字体、图片、接口和交互状态。专门生成的视频页可以把动画绑定到统一进度，复现性更好。

页面范围要写成镜头动作。首页滚动到哪一段，文章页停在哪个内容区，索引图是否需要拖动，搜索页是否需要输入。动态页面要把动作写进脚本。

页面层怎么做

HTML 负责结构，CSS 负责视觉，JavaScript 负责状态。需要时间轴时用 GSAP。需要复杂绘制时用 Canvas、SVG、WebGL 或 Three.js。

视频页面最好有一个统一进度。每一帧都能通过进度还原画面，采集结果会稳定很多。

复用线上站点时，重点是控制已有页面状态。滚动、点击、输入、拖拽、展开都要由脚本驱动。页面里有价值的交互，要在画面里发生。

控制层怎么做

Playwright、Puppeteer 或 HyperFrames 负责打开页面、设置视口、等待资源、驱动动作和采集画面。

采集前先预热页面。字体加载、图片解码、接口返回、Canvas 或 WebGL 初始化都应该完成。成片开头直接进入有效画面。

滚动动画优先控制位置或进度。真实滚轮受系统和设备影响，重复采集时容易漂移。

采集怎么选

浏览器录制适合快速预览。速度快，能看到整体节奏。

逐帧渲染适合最终输出。每一帧按固定进度生成，帧率、时长和画面状态更稳定。

HyperFrames 的价值在逐帧采集。FFmpeg 负责把帧序列或片段编码成 MP4，并处理帧率、码率、像素格式和兼容性。

验收看什么

验收看画面和动作。

首尾帧要干净。字体、图片、Canvas、WebGL 要正常。滚动、拖拽、输入等动作要真实发生。节奏要符合脚本。目标设备要能播放。

画面像截图时，检查控制脚本。黑帧、空白帧、WebGL 丢画面时，检查浏览器渲染和采集方式。播放异常时，检查编码格式和像素格式。

这套流程的关键是可复现。页面状态、动作进度、采集帧率和编码参数都能被脚本控制，视频才方便反复修改。