白鹭技术深扒：“吴亦凡入伍HTML5”零制作难度？

有一种H5的互动营销广告，叫“吴亦凡入伍？”……

相信这几天你的朋友圈都被“吴亦凡即将入伍？”的帖子攻占过，表面看是“腾讯新闻”一篇报道，但随后跳出的吴亦凡逆天的H5创意页面揭秘真相，竟是其参加某手游的明星战队，此“入伍”实际上是代言。

为什么大家明明知道这只是一个广告，还“自来水”般的分享转发？

令人脑洞大开的创意肯定是一方面。

原以为只是一条比较正经的新闻，结果主人公从新闻中跳出，撕掉新闻海报后用iPhone打电话，带给手机屏幕前的你无与伦比的参与感与专属感。逼真的效果让网友惊呼如此高科技是怎么做出来的？

酷炫创意固然重要，背后的技术支持才是真正的催化剂。

技术层面，其实并没有什么难度，只是大家都没有想到通过“视频+H5交互的形式”组合引爆。不需要采访资深某某某，“知乎网友”已经给出了这个H5的详细的制作流程甚至源代码。

据这位网友解析，整个内容是由3个视频和3个H5页面实现的，使用比较巧妙的方法将每个video串起来。

通俗易懂的流程大概是这样的：

腾讯的H5新闻页面，嵌套了第一个视频（v1），v1播放完成后，立即播放第二个撕下新闻的视频（v2），v2播放完成后，显示一个播放微信通话声音的H5页面，利用接听按钮的点击事件实现了第三个视频的播放。

他表示已经在下班时间轻松地用Egret白鹭引擎最新版本成功还原了这个H5。

而且，他还从时间成本、人力成本和技术成本等方面对本次制作过程做了对比分析：

用普通H5编写，没有代码参考，需要考虑各个系统版本对声音的支持、如何调用、如何直接播放的问题，一位2-3年的前端开发经验的工程师，需要3-4天时间完成。

如用白鹭引擎最新版本开发，就算以前没有做过视频相关内容的开发者（如他自己），只需熟悉基础框架，基本无技术门槛，一天时间即可开发而成。源代码可到白鹭引擎官方BBS获取。

虽然整个案例没有任何技术难点，只是每个视频衔接的地方需要前端技术依靠代码进行组合，但是通过鲜活的创意使一系列狂拽酷炫的技术无缝呈现，无疑让这则广告成为了又一经典营销案例。 接下来，或许这种“H5+视频”的组合方式将继续在你我朋友圈里刷屏。