送礼物、买东西、加特效，这个能力让小程序视频有了N种玩法！

阅读时间：6m

最懂

小程序生态商业

的自媒体

你常用视频类小程序吗？在点赞、分享等互动时，也许遇到过体验不够流畅的情况。比如，点击视频上的分享按钮后，播放会突然卡顿，或者这些按钮与视频就不在同一页，几乎发现不了。

现在，这些问题都可以用「video同层渲染」能力来解决了。

本期《小程序说·能力百科全书》，微信公开课与晓程序观察（yinghoo-tech）一起，来探究小程序「video同层渲染」能力，看它是如何帮助视频类小程序优化互动体验的。

本文由晓程序观察（yinghoo-tech）采写，首发于「微信公开课」。

你在用小程序上看视频的时候，遇到过这样的问题吗？

要么在视频上点击分享等按钮后，视频播放突然异常卡顿；

要么按钮与视频完全不在同一页，十分“割裂”；

要么根本就找不到这些按钮；

……

小程序之所以在视频的体验上遇到这些问题，是因为分享等按钮与视频并不在同一层，两者不能同步渲染，因此，也就不能在视频播放的同时直接操作其他功能。

现在，微信上线了“突破性”的交互方式，用户可以在点击“悬浮”在视频播放页上的按钮时，而不影响视频流畅播放，甚至就像“画中画”一样，从而实现了“即看即点”。

而这背后最大的功臣，便是「video同层渲染」能力。

那么，「video同层渲染」能力是如何实现“即看即点”的呢？本期《小程序说·能力百科全书》，我们请来快手短视频、糖豆视频、小打卡等。看看他们是如何利用这一能力在视频互动上大展身手，从而提升用户留存的。

1

提升“老铁”用户体验

带来更多商业价值

“双击666！感谢老铁送的火箭！”

不用说，你肯定知道这句话是来自快手短视频。尴尬的是，当用户在小程序上浏览短视频或直播的时候，这些功能却玩不了。

这一问题确实给快手小程序团队带来不少烦恼，毕竟，没有“老铁文化”，就不叫快手了。“之前，覆盖在视频上面的点赞、送礼物等按钮，都会导致页面卡顿、动画效果不能实现等”，快手小程序前端负责人宋长安告诉我们。

当时，快手的第一版解决方案是，把这些按钮放在视频下方，从而避免与视频重合，虽然会有一定的割裂感，但也只能如此。

上线「video同层渲染」能力之后，它可以实现视频上“悬浮”的按钮与视频同步渲染，也就不会出现以上所提到的“画面卡顿问题”。点赞、分享、送礼物等功能更沉浸式，复杂动画效果也有了，“双击666”也终于回来了。

另外，相较于此前的“割裂感”，现在体验上也好很多，尤其是沉浸式的体验会让用户产生一种使用独立App的“错觉”。

操作成本降低和体验优化之后，用户留存自然也就会有很大提升。“虽然快手小程序才刚刚接入这个能力，但在留存上，我们预期会带来5%以上的增幅”，宋长安肯定地和我们说。

当然，不仅是在短视频体验上，在快手核心业务——直播上，「video同层渲染」也能起到很好的效果。比如，可以做更多酷炫好玩、声临其境的送礼物动画效果，引导用户充值和送礼，带来商业变现价值。

在快手看来，正是有了这一能力，这些“悬浮”在视频上的按钮就能与视频本身同时渲染，从而不影响视频播放。因此，未来就可以做更多商业上的探索，比如推送企业广告、主播在直播间上添加商品等。

2

视频播放量“直线”上升的秘密

只要有“广场”的地方，就一定有广场舞。

现在，小程序上也有广场舞了，糖豆视频就是这样一款广场舞分享教学的小程序。

前段时间，他们遇到了一个问题，爱跳广场舞的阿姨看到好玩有趣的跳舞视频，却总也找不到分享与收藏的按钮，无法分享给自己的好姐妹。

“碰到这一问题，我们尝试过把分享、收藏这些按钮放在视频播放页上。但由于它们是两层的，没法同步渲染，视频播放就会变得非常卡顿，体验特别不好”。糖豆小程序业务负责人周涛告诉我们，“所以，也是不得已才将这些按钮与视频分开，放在了视频下方。”

「video同层渲染」能力的上线，解救了广场舞阿姨们。

具体来说，这一能力可以实现视频播放时的“悬浮”按钮与视频同步渲染，用户可以在视频上直接点击分享或收藏，视频播放也不受影响。而且，视频也就可以“放心地”全屏展示了，视觉效果也好很多。

“我们目前仍处于小范围内测阶段，接入「video同层渲染」后，这部分内测用户的人均视频播放数从2.9提升到了4.5。”糖豆小程序业务负责人周涛开心地告诉我们。

有了这项能力，糖豆视频还推出了一些好玩的功能。比如，用户直接上传照片就可以快速生成视频，这对于年长的用户来说，十分实用；还可以直接在视频播放页添加商品，用户可以边看视频边买舞蹈老师推荐的商品，也获得了更多商业化的可能。

3

用视频记录生活

让打卡更有趣

“「video同层渲染」能力帮我们实现了内容的闭环。”小打卡创始人徐佳义说。

在小打卡上，越来越多的用户习惯用视频来记录生活，但是直接播放用户上传的视频会很单调，比如美食健身、手工手帐、练字绘画、学吉他钢琴的过程等等，就需要更多趣味性的东西。

“用户有这个需求，我们之前也尝试过一些办法，比如在视频上加一些贴图效果，但由于视频与贴图不能同步渲染，所以效果和体验都特别不好”，徐佳义之前一直在愁这个问题，“这样也就降低了用户发布视频的欲望。”

接入「video同层渲染」这项能力之后，在视频上添加的贴纸、相框等效果就可以和视频同步渲染了，而且这些效果还能动起来，所以体验上就会好很多，用户发视频的时候也就没那么枯燥了。

借助这个能力，小打卡还做了很多有趣的玩法。比如，在视频播放时双击点赞、评论通过弹幕的方式在视频播放页展示出来，以及在视频中添加“问答”的玩法来拓展与用户的互动方式等等。

“视频有了更好的展现效果、互动性、趣味性，也就会有更多用户点击观看与互动，从而反向促使用户去创造更多优质内容，所以，这个能力是帮助我们实现了内容闭环。”徐佳义说。

当然，在用户留存的提升上，这项功能也确实为小打卡带来不小的优化，比如，在用户浏览视频停留时长上，就有了一倍以上的增长。

给开发者的一些建议

1、「video同层渲染」目前最大的问题就是兼容性问题了，所以需要在组件中进行版本判断，输出对应的方案，使用的时候可以关注下用户的基础库版本；

2、切换视频的时候，容易出现黑屏问题，原因是切换至下一个视频的时候，有一段缓冲的等待时间。所以，需要设置视频的预加载；

3、在不影响用户体验的情况下，尽可能的压缩媒体资源文件，因为它最容易消耗内存。

本期《小程序说·能力百科全书》介绍的「video同层渲染」能力，大家看过之后都有哪些启发？欢迎留言与我们交流。需要接入的话，赶快参考《开发文档》实战体验吧。

当然，如果你有在能力运用上的新想法、案例，或者数据，以及开发过程中遇到的疑问，都可以通过填写下方问卷与我们联系。

End

好文回顾

好书推荐：

《微信力量》、《微信思维》是微信团队联合萤火科技推出的两本书，通过采访数十个企业商业案例，共同描绘了一幅微信生态的全景图，是了解微信生态的最佳读物。