微信H5保存或下载视频到本地,将视频直接分享视频给好友

一.前因        

        首先,我其实是个标题党,标题所说的功能受制于微信限制,是没有方案可以在微信里打开的H5页面中直接保存视频到本地或者以视频消息的方式直接分享给好友。图片就没这个烦恼,可以直接长按图片,微信会弹出原生菜单保存或分享图片。如下图所示:

         

        那视频要怎么分享呢?开始我们只能使用折中方案,将视频当作链接消息分享,接入了微信jssdk将视频地址作为链接地址,在页面中用箭头提示用户点击右上角去将地址分享出去,其他用户点击链接会打开浏览器直接播放视频。

二.后果

        显而易见,这种方式十分挫,分享人需要被特意引导去分享链接,增加了分享门槛,分享人无法保存本地,没办法随时随地分享,除非他把链接收藏。而且分享出来的是链接消息,不能直观告诉被分享人是个视频,减少被分享人点击的意愿,同样的情况会减少二次分享意愿。所以我们最后还是想找到一种方式能直接把视频分享出去。

三.解决方案

        在微信生态里面做事,必须要遵守微信规则(以及要填很多坑,后续再谈)。既然H5没有相关能力,那就只好往小程序找找了。不出所料,小程序的确可以直接保存视频或者分享视频。

具体接口:

转发视频到聊天

保存视频到系统相册

所以摆在眼下的就是如何运用小程序的能力问题了。经过调研总结如下三种方案:

1.在小程序内嵌现有H5

        使用小程序的开放能力,内嵌webview加载H5页面,得到视频地址后,从webview页面跳转到小程序原生页面,展示视频并调用相关能力保存或者分享视频。 

存在问题:

        内嵌后,由于webview限制需要做一些适配等,比如现有的页面链接分享操作需要做调整,无法调用原jssdk接口分享链接消息,需要转为分享小程序卡片。再比如,原先是扫码打开H5,要调整为扫码打开小程序。

优点:

        体验相对连贯(对比第2点),分享时只需要做一个小程序内页面跳转(这跳转是由于小程序限制在内嵌webview的页面没法直接调用原生接口,所以需要跳转到一个原生页面处理,也可能是我没找到方法,如果有请告诉我),工作量适中。

2.依然使用H5,只在分享视频时跳转小程序

        微信提供了从H5页面直接打开小程序的能力,所以可以在拿到视频链接后,直接带参数跳到小程序,调用小程序能力去保存分享视频。

存在问题:

        体验比较割裂 ,会弹框提示二次确认是否跳转,然后需要单独做一个单纯展示视频以及分享保存的小程序,这种不知道能不能通过审核。

优点:

        目前绝大部分流程无需调整,只调整视频分享的逻辑,工作量小。

3.用小程序原生代码或者跨平台框架实现现有功能

存在问题:

        移植工作量大。

优点:

        体验最优,无需跳转分享,体验最流畅。

 四.方案选择

        方案选择需要评估自身项目实际情况来决定,比如工期不赶,页面架构简单,移植工作量不大,当然是选择方案三以达到用户体验最优解。

        但是很多时候人在江湖,身不由己,做项目也一样,我们最后选择的是方案一,因为时间不是很充裕,而且最重要的是我们使用了一个第三方的库Three.js,用于展示3D模型的,在原生小程序中支持程度不明确(后续做了专门验证的确没法用,效果差),官方移植版本许久未更新,问题多多,另外还有一些民间移植版本效果不明。

        所以在调研结束后,我们就选择了方案一,工作量适中,开发风险适中,用户体验适中。

五.结束

         在写这篇文章的时候,已经在按方案一去调整了,本来以为正常流程都是和纯H5表现一致,结果发现了很多意想不到的坑,明明在微信浏览器打开H5都正常的,同样代码到了小程序webview打开就异常了,所以后续会对这些坑做一些记录总结。我们前端用的Vue开发,所以后续对微信小程序内嵌webview加载H5的坑总结也是基于Vue。

猜你喜欢

转载自blog.csdn.net/z409595641/article/details/122154225
今日推荐