![5c5541b864923743a71a51b1791129c9.png](https://i-blog.csdnimg.cn/blog_migrate/1ac317f9ce7bbfa3b2c063d8b6cff4bf.jpeg)
你喜欢用小程序刷短视频吗?
刷视频时,是否遇到过这样的情况,看到一个有趣的视频,想要点赞、分享时,却:
要么在视频上点击分享等按钮后,视频播放突然异常卡顿;
要么按钮与视频完全不在同一页,十分“割裂”;
要么根本就找不到这些按钮,更别说能有一些好玩的效果了;
……
![3c8778a83b64376d438a90d003a69e9c.png](https://i-blog.csdnimg.cn/blog_migrate/f8c73f4de43a9eeac46930c0dcfcced8.jpeg)
从开发角度来看,之所以会遇到这些问题,是因为分享、点赞等按钮与视频并不在同一层,两者不能同步渲染,因此,也就不能在播放视频的同时,操作其他功能。
现在,一个能力可以解决所有问题,它就是「video同层渲染」。
有了它,用户可以在点击“悬浮”在视频播放页上的按钮时,而不影响视频流畅播放,实现了“即看即点”。
此外,开发者也可以在视频上增加一些好玩有趣的效果了,比如视频点赞时的动画效果、在直播间送礼品等等。产品体验优化,用户留存也就随着提升,而这背后最大的功臣,便是「video同层渲染」能力。
对此,晓程序观察(yinghoo-tech)邀请到几位在「video同层渲染」能力的运用上做的比较好的开发者,一起来聊聊这一能力是什么?能够帮助开发者解决哪些问题?
01 在上线「video同层渲染」前,小程序在视频体验上有什么不足?
小打卡:
在「video同层渲染」前,我们想要在基于video做一些提升用户体验的特效,或者在 video上加一些自定义的效果根本无法实现,当时的解决方案要么就是用WebView,要么就是不去做效果。
糖豆视频:
在糖豆视频站内,有很多秀舞类、生活类的UGC小视频内容,在上线「video同层渲染」能力开放前,视频作者的展示、分享、收藏入口是在第二屏展示的。
这直接导致了手机屏幕的空间利用率降低,且较影响用户功能体验,例如用户如果想收藏视频或者进一步了解作者,第一时间是无法找到入口的。
快手:
「video同层渲染」上线之前,所有覆盖在视频上面的组件都有兼容性和性能问题,比如会导致页面卡顿,定位失效、无法做复杂动画等,虽然尝试过一些手段,但依然不能达到预期效果。
最后只能在产品设计层面尽量避免这种场景,另外开发成本相对于h5要高出很多。避免按钮与视频重合,只能放在视频下面,这样一来给用户感觉就是割裂的。
02 「video同层渲染」上线后,在功能上都有哪些改善?实现了哪些玩法?
小打卡:
小打卡小程序中有很多视频形式的日记内容,所以我们在5月份尝试做视频相关项目的时候,就开始运用「video同层渲染」这项技术了。
它帮助我们实现了一些好玩的交互方式,比如,视频支持双击点赞、看视频问答互动、评论可以通过弹幕的方式在视频播放页展示出来等等。
在8月份的时候,我们尝试做过在视频中添加“答题组件”的玩法来拓展用户和视频的互动方式,用户的整体参与度、分享率都不错,后续会围绕着探索更多契合用户的场景来充分利用这项能力。
糖豆视频:
「video同层渲染」主要应用是在较小视频沉浸式消费互动上,对糖豆用户秀舞类、生活类小视频的消费体验改进很大。这样就进一步加强消费者和生产者的连接互动,例如关注关系、留言评论等。
玩法上,之前做过自动合成视频的玩法,就是可以将照片自动合成变成视频,并配上音乐,这在用户群体中还比较受欢迎。
快手:
「video同层渲染」能力上线后,就可以可以在视频上覆盖组件,比如动画、双击点赞功能,很大程度上降低了开发及维护成本。
玩法上,小程序支持更丰富的点赞动画,比如气泡,分享动画,这些都可以引导用户产生更多的点赞和分享行为。未来会在直播上去做更多效果,比如,连续送礼时不用户点击第二次等等。
03 「video同层渲染」能否给小程序带来更多商业价值?比如广告等。
小打卡:
小打卡的目标,是在用户的打卡视频上,结合「video同层渲染」这样的能力,给用户更好的展现效果,以及增加互动性、趣味性和参与感,引导用户更走心地去创造、生产优质的视频。
这一点不同于其他流量型的视频小程序,所以,这一能力没有为用户量和商业化带来太多贡献,更多还是为了提升用户的体验,提升用户的内容生产动力和内容的可消费性。
未来,还是会在商业化上继续探索,比如在视频上挂上实体商品销售等,但目前没有广告。
糖豆视频:
商业化上,目前还没有广告,不过未来会考虑。目前,为电商导流是主要的商业化方式,展现效果就是,用户可以边看视频边挑舞蹈老师推荐的商品。
快手:
快手的商业化,主要还是在直播间里面,「video同层渲染」能力能够帮助我们做更多的送礼动画和充值提示,可以引导用户更多的充值和送礼,通过小程序带来更多商业变现价值。
04 接入及使用「video同层渲染」过程中,开发者该注意哪些问题?
开发者们:
1、「video同层渲染」目前最大的问题就是兼容性问题了,所以需要在组件中进行版本判断,输出对应的方案,使用的时候可以关注下用户的基础库版本;
2、切换视频的时候,容易出现黑屏问题,原因是切换至下一个视频的时候,有一段缓冲的等待时间。所以,需要设置视频的预加载;
3、在不影响用户体验的情况下,尽可能的压缩媒体资源文件,因为它最容易消耗内存。