网页演示视频录制助手

这个技能能帮你做什么

如果你需要录制网页产品的演示视频，这个技能能帮你做出专业级的效果：

• 自动录制网页操作 —— 自动在浏览器中执行操作步骤并录制为视频，不用手动操作
• 鼠标跟随效果 —— 视频中显示鼠标指针的平滑移动轨迹，让观众清楚看到点击位置
• 字幕提示 —— 在视频底部添加步骤说明字幕，帮助观众理解当前操作
• 自然节奏控制 —— 自动调整操作节奏，留出适当的停顿时间，避免视频过快
• 分步录制 —— 支持先预演检查所有操作步骤，确认无误后再正式录制
• 专业视频输出 —— 生成 WebM 格式的视频文件，可直接用于演示或分享

什么时候用

• 产品演示 —— 需要向客户或领导展示产品功能时
• 操作教程 —— 录制操作步骤的教程视频，方便用户学习
• 功能介绍 —— 新功能上线时，录制演示视频展示使用方法
• Bug 复现 —— 录制问题复现过程，方便开发人员定位和修复
• 交互展示 —— 展示网页的交互效果和用户流程

主要覆盖哪些场景

1. 网页功能演示 —— 展示 Web 应用的各项功能和操作流程
2. 用户流程录制 —— 录制完整的用户使用流程，如注册、下单、提交等
3. 产品功能介绍 —— 为新功能录制介绍视频
4. 操作步骤教程 —— 录制详细的操作步骤指导
5. UI 变更展示 —— 展示界面改版前后的对比
6. 自动化演示 —— 不需要人工操作，自动完成录制

怎么用

录制一个网页演示视频的基本流程：

1. 了解页面 —— 先查看要录制的网页，了解页面上的表单、按钮、输入框等元素
2. 预演检查 —— 自动检查所有操作步骤能否正常执行，避免录制时出错
3. 正式录制 —— 按照预设步骤自动操作并录制视频，期间会自动添加鼠标效果和字幕
4. 输出视频 —— 生成 WebM 格式的视频文件，可直接使用

使用示例：

# 预演模式：检查所有步骤是否正常
node demo-script.cjs --rehearse

# 正式录制
node demo-script.cjs

核心原则

• 先预演后录制 —— 正式录制前先预演检查，确保所有步骤都能正常执行
• 故事化叙述 —— 按照"进入→了解背景→执行操作→展示结果"的叙事流程录制
• 节奏自然 —— 操作之间有适当停顿，让观众能看清每个步骤
• 平滑过渡 —— 鼠标移动平滑，页面滚动流畅，字幕提示清晰
• 细节到位 —— 关注按钮点击、文本输入等细节，确保演示效果专业

适用场景

适合的情况：

• 需要录制网页产品的演示视频
• 需要展示完整的用户操作流程
• 需要制作产品教程或培训材料
• 需要向客户或团队展示产品功能
• 需要自动化的录制流程，减少手动操作

不适合的情况：

• 录制桌面软件（非网页）的操作
• 需要真人出镜的讲解视频
• 只需要静态截图，不需要动态演示
• 录制环境无法运行自动化工具
• 涉及敏感数据的内部系统演示

注意事项

• 提前了解页面 —— 录制前先查看目标页面，了解元素位置和交互方式
• 预演很重要 —— 不要跳过预演步骤，否则录制可能失败
• 节奏控制 —— 适当的停顿比快速操作更有利于观看
• 字幕简洁 —— 字幕文字要简短清晰，不要过长
• 分辨率固定 —— 使用 1280x720 的分辨率录制，确保视频清晰度
• 无头模式 —— 录制时浏览器在后台运行，不干扰其他工作