今天下午闲着没事，琢磨着把我之前做的一个H5页面搞成个视频，主要是觉得那个H5里有些动态效果挺好玩的，想直接发个视频给朋友看看，比发链接方便多。省得他们还得点开链接，有时候手机还不兼容，效果出不来。所以就自己动手实践一下，顺便记录下来，分享给可能也有这需求的朋友们。

准备工作

我得把那个H5页面准备我直接用电脑浏览器打开那个H5的链接，把它调整到我觉得合适的窗口大小。主要是把核心展示区域放在正中间，周围别留太多空白，也别让内容显示不全。然后就是把桌面上其他乱七八糟的窗口都关掉或者最小化，不然录屏的时候录进去就不好，看着乱。

接着就是找录屏工具。我电脑上好像装好几个，平时也不怎么用。随便打开一个能用的就行，现在免费的录屏软件也挺多的。我就找个界面看着简单点的打开。

录屏设置

打开录屏软件之后，一般都要先设置一下。这步还挺关键的，影响到视频的效果。

• 录制区域： 我选的是“选定区域录制”，然后框住刚才调整好的浏览器窗口那一块。有的软件也能直接选“录制窗口”，更方便。
• 分辨率和帧率： 分辨率我一般就设置成1920x1080，也就是1080p，这样清晰度够用。帧率嘛我感觉30帧就够，对这种H5效果演示来说，没必要搞太高，不然视频文件会很大。
• 声音： 这个得想如果H5本身有背景音乐或者音效，你想录进去，那就得把“系统声音”或者“扬声器声音”之类的选项打开。如果想自己边操作边解说，那就得把“麦克风声音”打开。我这回只想录H5本身的效果和音乐，所以就把麦克风关，只开系统声音。

这些都检查没问题，就可以准备开始。

开始录制

设置都弄好后，我点软件上那个红色的“开始录制”按钮，一般会有个倒计时，三二一这样。倒计时结束，我就赶紧把鼠标切回到那个H5页面上。

然后我就开始在H5页面上操作，比如模拟手机上的滑动、点击按钮、展示那些动画效果等等。关键是要把我想要录下来的所有效果都演示一遍。 操作的时候，我尽量让动作慢一点，稳一点，别太快，不然看的人眼花缭乱。也避免鼠标指针在屏幕上乱晃，尽量指哪打哪。

结束和保存

把我想要的效果都演示完之后，就可以停止录制。一般录屏软件都有个悬浮窗或者快捷键，按一下就停。我用的是快捷键，比较方便。

停止之后，软件通常会弹出一个预览窗口或者直接让你保存文件。我检查一下录的内容没啥大问题，就点保存。保存的时候，一般会让你选个保存路径，然后给视频文件起个名字，比如我就叫“XXX H5效果演示.mp4”。格式的话，我通常都选MP4，因为这个格式兼容性最手机电脑都能播。

简单处理下

直接录出来的视频，有时候开头结尾会多录进去几秒钟，比如我点开始和结束按钮的操作。或者中间万一有点小失误，卡一下啥的。看着不太舒服。

我会用个简单的视频剪辑软件，比如系统自带的或者一些免费的小工具，把视频拖进去，把开头结尾多余的部分裁掉，让视频更紧凑。如果中间有瑕疵，也可以剪掉或者做个简单的过渡。这一步不是必须的，但处理一下效果肯定更

好，基本上就是这么个过程。用录屏软件把H5页面转成视频，虽然听起来有点笨拙，但实际操作下来，我觉得是最直接也最没门槛的方法，不需要懂什么复杂技术。只要稍微细心点，把录屏参数设置操作的时候稳当点，就能得到一个不错的演示视频。分享起来确实方便多。