V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
awesomes
V2EX  ›  分享创造

关于使用教程的录制方案

  •  
  •   awesomes · 2022-04-19 14:08:08 +08:00 · 1951 次点击
    这是一个创建于 709 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    7 条回复    2022-04-26 17:25:53 +08:00
    chekun
        1
    chekun  
       2022-04-21 09:01:12 +08:00
    楼主你这个不错,我可以放弃 bejson 和 fahelper 里面的 json 工具了 点个赞
    awesomes
        2
    awesomes  
    OP
       2022-04-21 09:19:26 +08:00
    @chekun 哈哈谢谢,还有很多有意思的功能
    ljlljl0
        3
    ljlljl0  
       2022-04-24 13:44:10 +08:00
    这种录制工具记得以前 Windows 上有 XP 之后就没了
    PainAndLove
        4
    PainAndLove  
       2022-04-26 12:24:06 +08:00
    赞👍
    这个"录制" + "播放" 是自己实现的还是现成的库呢?
    PainAndLove
        5
    PainAndLove  
       2022-04-26 12:24:27 +08:00
    @PainAndLove 有 github 地址嘛, 想学习一下
    awesomes
        6
    awesomes  
    OP
       2022-04-26 17:13:23 +08:00
    @PainAndLove 好像有类似的录制 JS 库,但是这种通用型的可能没法去适配到具体的应用中,当然我也不确定,这个是我自己写了一个简单的播放功能,没有开源,也没做成通用的,但是原理比较简单我大致给你说一下:

    先定义好动作,目前我这边有如下动作:

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

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

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

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

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

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

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

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

    效果上不是很好看,不过应该再美化一下还可以,毕竟是交互的,但是又不同于那种指引,需要用户去点,这个做出来跟视频播放差不多,所以效果会更好,毕竟现在用户都很懒嘛。
    awesomes
        7
    awesomes  
    OP
       2022-04-26 17:25:53 +08:00
    @PainAndLove 有时间准备完善和优化一下,做成开源库
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1028 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:22 · PVG 06:22 · LAX 15:22 · JFK 18:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.