关于使用教程的录制方案

[awesomes]

前段时间做了一个小工具，里面其实包含了很多高级功能，但是首屏都隐藏起来了，很多用户其实不知道，需要录制教程来说明一下。但是传统的视频录制难度比较大，涉及到各种剪辑制作，而且工具随时在迭代，之前录制的使用方式可能过两天就过期了。

那么能不能让这个教程是动态的呢？最后想到了一个方式，其实可以将动作记录下来在网页中进行“播放”，这样一来用户看到的就是实际的网页操作了，功能就会永不过期，还能解决多语言的问题。

当然前提是网站类型的应用，实现的功能包括：播放、暂停、重播，拖放进度目前还没法实现，得研究一下能不能做，原理其实就是准备一组动作，比如点击按钮、输入文本什么的，最终在网页中去依次触发这些动作即可（跟当前有些 JS 库去记录用户操作然后回放原理差不多）。

我用 MOCK 功能做了一个初步的示例，可以看一下演示过程中有没有问题，看完之后能不能看懂 https://www.jsont.run/tutorial/mock-student

[chekun]

楼主你这个不错，我可以放弃 bejson 和 fahelper 里面的 json 工具了 点个赞

[awesomes]

@chekun 哈哈谢谢，还有很多有意思的功能

[ljlljl0]

这种录制工具记得以前 Windows 上有 XP 之后就没了

[PainAndLove]

赞👍
这个"录制" + "播放" 是自己实现的还是现成的库呢？

[PainAndLove]

@PainAndLove 有 github 地址嘛， 想学习一下

[awesomes]

@PainAndLove 好像有类似的录制 JS 库，但是这种通用型的可能没法去适配到具体的应用中，当然我也不确定，这个是我自己写了一个简单的播放功能，没有开源，也没做成通用的，但是原理比较简单我大致给你说一下：

先定义好动作，目前我这边有如下动作：

1 、定位元素，也就是把鼠标移到这个元素上，然后高亮，其实就是给这个元素一个 ID ，然后获取该元素的 position 即可。

2 、显示说明信息，这个一般是依赖上面的定位元素的位置。

3 、点击按钮，这个就是定位到按钮然后触发 click 事件

4 、JS 逻辑。因为目前的前端应用一般是 mvvm 的，比如我用的是 vue ，所以有些修改 js data 值得动作没法通过修改某个文本框的值去改变，只能通过类似 EventBus 这种去做，这也是为什么不太好做成通用的原因，可以研究一下。

后面就是播放和暂停，注意这里要实现暂停的话就需要用 setTimeout 去做，比如某个动作需要 10 秒完成，但是在 5 秒的实话我按了暂停，那么这个动作就会被记录下来，然后下次继续播放的实话再将这个动作延长 5 秒即可。

重播的话可能跟使用的框架有关系，我这边用得 vue ，直接将 vuex 和 data 重置即可。

快进和后退目前还没办法实现

目前这个方案存在的不确定性就是一些中途的 js 加载耗时，不过应该不是大问题。

效果上不是很好看，不过应该再美化一下还可以，毕竟是交互的，但是又不同于那种指引，需要用户去点，这个做出来跟视频播放差不多，所以效果会更好，毕竟现在用户都很懒嘛。

[awesomes]

@PainAndLove 有时间准备完善和优化一下，做成开源库