很多网页演示视频看起来只是“把网页从上往下滚一遍”，但真正制作时还要处理页面加载、滚动速度、停顿、点击、重点标注、鼠标显示以及视频导出等问题。
web-scroll-video Skill 可以把这些操作交给 Codex。你只需要用中文描述网页地址和镜头要求，Codex 就会把要求整理成动作脚本，控制浏览器逐帧采集画面，最后输出标准的 MP4 视频。
本教程使用官方仓库自带的网页示例，完整走一遍下面的流程：
安装网页滚动视频 Skill
→ 检查运行环境
→ 用中文描述镜头
→ 生成动作脚本
→ 运行脚本并导出 MP4
→ 根据试听结果调整
→ 检查最终文件教程说明： 本教程中的网页画面、命令和示例视频均以官方仓库为基础。实际录制其他网站时，页面结构、加载速度和可交互元素可能不同，需要根据实际情况调整镜头描述。
一、先认识这个 Skill 能做什么？
网页滚动视频 Skill 适合制作产品介绍、官网导览、项目演示、作品集展示和教程配图视频。
它可以控制以下镜头动作：
- 打开指定网页；
- 在某个位置停顿；
- 平稳滚动到指定像素或指定文字；
- 点击页面上的按钮或菜单；
- 输入搜索内容；
- 放大页面或某个重点区域；
- 高亮页面中的文字；
- 选择是否显示鼠标；
- 按指定的分辨率、帧率和时长导出 MP4。
它的核心不是“录制一次网页”，而是把网页录制过程保存成一份可以反复修改的动作脚本。后面如果觉得滚动太快，只需要修改动作要求，不必重新手动录屏。
二、从官方仓库安装网页滚动视频 Skill
本教程使用的项目是官方仓库：
https://github.com/upenn/web-scroll-video
打开 Codex，直接发送下面这句话：
请从下面的官方仓库安装网页滚动视频 Skill：
https://github.com/upenn/web-scroll-video
安装完成后，请告诉我 Skill 是否已经生效；如果需要重启 Codex，请明确提醒我。安装完成后，重新启动 Codex，再继续后面的步骤。这样可以避免新安装的 Skill 没有被当前会话读取。
如果你希望手动安装，也可以先把仓库下载到本地，再让 Codex 读取其中的 SKILL.md。但对于普通使用场景，直接把官方仓库地址发给 Codex 更简单。
安全提醒： 安装 Skill 前先确认仓库地址是
upenn/web-scroll-video，不要只根据项目名称安装来源不明的同名仓库。
三、检查本机能不能录制网页
安装 Skill 不代表本机已经准备好录制环境。网页滚动视频工具主要依赖下面三项：
| 依赖 | 作用 | 建议版本或状态 |
|---|---|---|
| Node.js | 运行网页录制程序 | 22 或更高版本 |
| Chrome、Chromium 或 Edge | 打开并控制网页 | 能正常启动 |
| ffmpeg | 把连续画面合成为 MP4 | 能在终端运行 |
把下面的提示词发给 Codex：
请检查网页滚动视频 Skill 的运行环境：
1. Node.js 是否达到 22 或更高版本；
2. 是否能找到 Chrome、Chromium 或 Edge；
3. ffmpeg 是否可以正常运行。
如果缺少依赖，请先告诉我缺少什么，暂时不要开始录制网页。在命令行中，等价的基础检查命令是：
node --version
ffmpeg -version如果使用的是 Windows，还可以检查浏览器路径：
where chrome环境检查通过后，再开始设计镜头。不要在依赖不完整的情况下直接生成视频，否则很难判断问题到底来自脚本还是本机环境。
四、用中文描述你想要的镜头
这个 Skill 不要求你先学习复杂命令。你可以像给剪辑师提要求一样，把下面几件事说清楚：
- 要打开哪个网页；
- 视频需要多大画面和多少帧；
- 开头是否停顿；
- 滚动到哪里、用多长时间；
- 哪些文字需要高亮；
- 是否需要点击、输入、放大或返回顶部；
- 是否显示鼠标；
- 输出文件叫什么。
例如，下面这段话可以直接发给 Codex：
制作一段 1920×1080、60 帧的视频，打开沃顿学院教师目录：
Wharton Faculty Directory
开场停顿 1 秒；高亮“Faculty Directory”1 秒；
用 4 秒滚动到页面下方约 1800 像素的位置，停顿 0.75 秒；
再用 5 秒平稳滚动到底部；隐藏鼠标。
请把动作脚本和最终视频放在同一个文件夹中，视频命名为 wharton-faculty-demo.mp4。描述镜头时，尽量使用网页上真实可见的文字，例如“Faculty Directory”“Departments”或“Search”，比只说“点击右边按钮”更稳定。
如果你只需要单纯从上往下滚动，也可以直接说：
请把 https://example.com 录成 1080P 视频，保持固定速度从顶部滚动到底部，隐藏鼠标，输出为 example-scroll.mp4。
五、理解 Codex 生成的动作脚本
当镜头要求比较复杂时，Codex 会先生成一份 .cue 动作脚本。它不是普通的说明文档，而是一行一行可以执行的镜头顺序。
官方示例的动作脚本大致如下：
out: wharton-faculty-demo.mp4
width: 1920
height: 1080
fps: 60
cursor: off
go https://www.wharton.upenn.edu/faculty-directory/
pause 1
highlight "Faculty Directory" for 1
scroll to 1800 over 4
pause 0.75
scroll to bottom over 5每一行的作用如下：
| 写法 | 作用 |
out: |
指定输出视频文件名 |
width、height |
指定视频画面尺寸 |
fps |
指定每秒帧数，60 更适合平滑演示 |
cursor: off |
隐藏鼠标；需要显示时改成 on |
go |
打开网页 |
pause |
停顿指定秒数 |
highlight |
高亮页面中的文字或元素 |
scroll to |
滚动到指定位置或页面底部 |
over |
指定动作持续时间 |
除了上面的动作，还可以使用：
click "Departments"
type "finance" into "Search"
press Enter
wait text "Results" timeout 10
zoom to 1.2 over 1
scroll by 800 over 2如果 Codex 生成的脚本和你的要求不一致，可以直接指出哪一行需要修改，不必从头重新描述整个项目。
六、运行脚本并导出 MP4
动作脚本确认无误后，让 Codex 执行它：
请运行刚才生成的 wharton-faculty-demo.cue。
完成后请检查：
1. MP4 是否生成；
2. 视频是否可以正常播放；
3. 输出尺寸、帧率和编码是否符合脚本要求；
4. 动作脚本和视频是否保存在同一个文件夹。如果需要在终端中直接运行，命令形式是：
node src/scroll-video.mjs --script examples/wharton-faculty-demo.cue脚本运行时，工具会依次完成以下动作：
- 启动临时浏览器并打开网页；
- 等待页面加载；
- 触发延迟加载内容；
- 按照脚本执行停顿、滚动、高亮和点击；
- 逐帧保存浏览器画面；
- 通过 ffmpeg 合成为 H.264 编码的 MP4。
官方示例设置为 1920×1080、60 帧，生成的文件是 wharton-faculty-demo.mp4。如果网页较长，生成时间会随着滚动距离和视频时长增加。
七、成片不满意，直接用中文修改
第一次生成的结果不一定就是最终版本。常见问题包括：
- 滚动速度太快，观众来不及阅读；
- 重点文字出现得太短；
- 点击前没有停顿；
- 页面加载不完整；
- 鼠标显示状态不符合需求；
- 滚动到某个文字时位置不够准确。
直接告诉 Codex 需要修改什么即可，例如：
请在原动作脚本上修改，不要改变网页地址和镜头顺序：
1. 第一次滚动从 4 秒改成 6 秒；
2. 高亮前增加 1 秒停顿；
3. 显示鼠标；
4. 其他内容保持不变；
5. 输出为一个新文件，不要覆盖上一版视频。修改时建议一次只调整一到两个参数，这样更容易判断哪项修改真正改善了成片效果。尤其是滚动速度，最好优先用 over 调整持续时间，而不是一开始就修改很多其他设置。
如果网页内容加载不完整，可以补充：
请增加页面加载等待时间，并使用更小的预加载滚动步长，确保图片和延迟加载区域完整出现后再录制。如果点击或高亮没有找到目标，优先使用页面上真实可见的文字；仍然不稳定时，再让 Codex 使用明确的 CSS 选择器。
八、检查最终视频和动作脚本
生成 MP4 后，不要只确认文件“存在”，还要快速检查画面和视频元数据。
先用播放器从头到尾检查：
- 页面是否完整加载；
- 滚动是否连续、平稳；
- 文字是否有足够阅读时间；
- 高亮、点击和输入是否发生在正确位置；
- 音画是否正常（网页录制通常没有配音，但仍要确认没有异常黑帧）；
- 视频比例是否适合发布平台；
- 动作脚本是否和 MP4 放在同一文件夹。
再使用 ffprobe 查看视频信息：
ffprobe -v error \
-select_streams v:0 \
-show_entries stream=width,height,r_frame_rate,duration,codec_name \
-of default=noprint_wrappers=1 \
wharton-faculty-demo.mp4官方 60 帧示例通常可以看到类似结果：
codec_name=h264
width=1920
height=1080
r_frame_rate=60/1
duration=11.75如果你没有在动作脚本中写 fps: 60，工具默认会按照 30 帧输出。发布教程、产品演示时，建议在脚本里明确写出画面尺寸和帧率，避免不同电脑上的默认值造成差异。
常见问题
1. 浏览器没有被找到
先让 Codex 检查 Chrome、Chromium 或 Edge 的实际安装路径。如果浏览器安装在非默认位置，可以指定路径：
node src/scroll-video.mjs --script demo.cue \
--chrome-path "浏览器可执行文件的完整路径"2. ffmpeg 不在环境变量中
可以指定 ffmpeg 的完整路径：
node src/scroll-video.mjs --script demo.cue \
--ffmpeg-path "ffmpeg 可执行文件的完整路径"3. 页面打开了，但图片没有加载
增加页面加载等待时间，或者把延迟加载区域分成更小的预加载步骤。可以直接告诉 Codex：
网页中的图片没有完整加载，请增加页面加载等待时间，并在正式录制前逐步预滚动触发延迟加载内容。4. 滚动太快或太慢
在动作脚本中调整 over 后面的秒数。秒数越大，滚动越慢；秒数越小，滚动越快：
scroll to bottom over 85. 点击、输入或高亮失败
优先使用页面上能看到的文字，例如：
click "Departments"
type "finance" into "Search"
highlight "Faculty Directory" for 1如果页面上有重复文字，再让 Codex 根据页面结构改用 CSS 选择器。
总结
网页滚动视频 Skill 的使用重点可以概括为三步：
- 安装技能：从官方仓库安装，并检查 Node.js、浏览器和 ffmpeg；
- 描述镜头：用中文说清楚网页地址、停顿、滚动、点击、高亮、缩放和鼠标显示；
- 反复修改：保留
.cue动作脚本，像给剪辑师提意见一样调整节奏，再重新生成 MP4。
它适合把网页操作转成可复用的视频制作流程。只要脚本保留在项目文件夹中，后续换网址、改滚动速度、增加点击或调整画面规格，都不需要重新手动录屏。
项目地址：https://github.com/upenn/web-scroll-video
本文来自投稿，不代表OPC中国立场，如若转载，请注明出处：https://www.opcchina.ai/?p=4247
