先想清楚视频要展示什么
“录制网站”其实涵盖三种截然不同的活儿,用什么工具,取决于你手上的是哪一种。
- 页面本身。 版式、字体、图片,从上到下。作品集、发布帖、模板展示页、客户验收。
- 页面上发生的事。 一个注册流程、一次筛选、一个展开的菜单。产品演示和教程。
- 作为物件的页面。 网站显示在笔记本或手机上,在空间里旋转。首屏主视觉和应用商店风格的宣传片。
为作品集、产品发布或客户录制网站的六种方式,从录屏软件到网址渲染器再到交互式演示,以及什么时候该用哪一种。
对于只需要从头滚到尾的公开页面,网址转视频渲染器能用最少的力气做出最顺滑的效果。对于有点击、输入和旁白的演示,用录屏软件,最好是能替你平滑光标、自动缩放的那种。对于需要登录的页面,自己录或者用扩展。样机工具和交互式演示解决的是另外的问题,它们与这些方式并存,而不是取而代之。
“录制网站”其实涵盖三种截然不同的活儿,用什么工具,取决于你手上的是哪一种。
| 方式 | 最适合 | 匀速滚动 | 需要登录的页面 | 工作量 |
|---|---|---|---|---|
| 网址转视频渲染器 | 展示页面本身 | 是,经过计算 | 不行 | 粘贴链接 |
| 精修型录屏软件 | 有点击和旁白的演示 | 只有你滚得匀才行 | 可以 | 录制,再剪辑 |
| 普通录屏软件 | 什么都能录,而且免费 | 只有你滚得匀才行 | 可以 | 录制、裁切、剪辑 |
| 浏览器扩展 | 你已登录的页面 | 取决于扩展 | 可以 | 安装,再录制 |
| 样机应用 | 设备上的网站,3D 效果 | 不是它们的重点 | 可以,从截图开始 | 设计工作 |
| 交互式演示工具 | 可点击的产品导览 | 不以视频为主 | 可以 | 采集流程,编辑步骤 |
你粘贴一个地址,工具在它自己的浏览器里打开页面,沿一条曲线滚动,再把结果编码成视频。一切都不依赖你的屏幕、鼠标或电脑,所以运动是匀速的,输出也可以是任意尺寸。Website Scroll Video 就是其中之一:它先移除 Cookie 横幅和聊天挂件,再以桌面、平板或手机宽度读取页面,导出最高 4K、60 fps 的 MP4、WebM 或 GIF,还能加上停顿、悬停和背景。
它的局限在于能访问到什么。渲染器只能打开匿名访客能打开的页面,所以后台面板、有密码保护的测试站和 localhost 都不行。现有的渲染器对比见替代方案页面。
Screen Studio 这类工具先录下你的屏幕,再替你做人工剪辑会做的事:平滑光标轨迹、在点击处放大、加上背景。要展示产品被使用的过程,它们是最佳选择。不过滚动仍然是你自己来的,所以手动滚过的长页面,依然带着滚轮的节奏。
OBS Studio、QuickTime、macOS 截图工具栏和 Windows 截图工具都免费,能录下任何你打开的东西。除了录制本身,它们什么都不替你做:Cookie 横幅、通知弹窗和不均匀的滚轮,统统会进到文件里。做些准备,它们也能录出好效果;如何录制网站滚动视频一步步讲了怎么做。
滚动录制扩展运行在你自己的浏览器里,所以能录到你已登录的页面,而且大多数会自动滚动。画质取决于你的电脑(因为录制就在那里进行),也取决于扩展本身:有的免费但有限制,有的收费。扩展与渲染器对比讲了各自什么时候合适。
Rotato 这类样机工具会把截图或视频放到 3D 的笔记本或手机上,再让设备动起来。它们是用来做主视觉的,不是用来做导览的,而且需要先有素材。常见的搭配是:用上面某种方式做一段滚动视频,再放进样机应用里的设备上。
HowdyGo 这类工具把产品流程采集成一步步可点击的步骤,由观看者自己往下点。它们是为销售和新用户引导团队打造的,定价也是按这个来的。有些能把演示导出成视频或 GIF,但自己点着走的导览,和坐着看的滚动视频,是两回事。
粘贴一个链接,免费预览滚动效果。注册即送 51 个免费点数,无需信用卡,导出的任何视频都没有水印。
如果是公开页面,把地址粘贴到网址转视频工具里。不用配置录屏软件,也不用手动滚动。如果是私有页面,就用录屏软件,并让脚本来滚动页面。
能。网址转视频渲染器在它自己的服务器上打开页面并据此生成视频,所以不会录你屏幕上的任何东西。它只适用于访客不登录就能打开的页面。
MP4(H.264)在哪里都能播放。WebM 文件更小,还支持透明,放在你自己的网站上很有用。GIF 用于不能播放视频的地方,比如邮件;同样长度下,它更大,画质也更低。