宣布！小程序视频卡壳原因找到啦！

阅读时间：6m

最懂

小程序生态商业

的自媒体

你喜欢用小程序刷短视频吗？

刷视频时，是否遇到过这样的情况，看到一个有趣的视频，想要点赞、分享时，却：

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

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

要么根本就找不到这些按钮，更别说能有一些好玩的效果了；

……

从开发角度来看，之所以会遇到这些问题，是因为分享、点赞等按钮与视频并不在同一层，两者不能同步渲染，因此，也就不能在播放视频的同时，操作其他功能。

现在，一个能力可以解决所有问题，它就是「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、在不影响用户体验的情况下，尽可能的压缩媒体资源文件，因为它最容易消耗内存。

END

好书推荐：

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

我知道你在看哟