“吴亦凡即将入伍”的H5技术到底是怎么实现的？

文/万能的大叔

近日，一则名叫“吴亦凡即将入伍”的H5广告引爆朋友圈，再次证明的大叔提出的“技术即传播”的理论。吴亦凡从新闻框中跳出来这个创意，确实是个惊喜。这个技术效果到底是怎么实现的？非腾讯系的公司s是否能够复制这样的成功？大叔今天聊聊这个。

对于这事，大叔看到自媒体朋友们迅速地分成了两派。一派是挺吴派，从各种角度分析这个H5做得好啊，比如满足了用户的好奇心，明星效应，标题起的十分吓人《史上最火H5是如何一夜爆红的》等等；另一派是倒吴派，也从各种角度分析，认为这个H5的战略是错的，比如选错了代言人，没有转发动机和下载游戏的转化率。

大叔认为，上面两派都是扯淡。理由很简单：1、这个H5火了，当然符合用户分享规律和传播逻辑，转发的人也不是傻子。2、尤其对吹毛求疵的人说一句，你先做一个原创的10万+或能刷屏的H5出来给我们瞧瞧，再谈转化率。

有点跑题了。回到上面的问题，“吴亦凡即将入伍”的H5到底是如何实现的？大叔认为，所有的创意和惊喜需要在一点点把这个H5“解刨”之后，就能看得清清楚楚。这个可能是完全没有任何技术背景的大叔和你更希望搞清楚的内容。

以下是大叔请教多位H5制作达人后，对此事的一个梳理。如有表述有误，纯属是他们的问题，与大叔无关。

一、“吴亦凡即将入伍”到底是一个H5，还是一个视频（flash）？

现在大家都知道这是一个H5，一出来的时候，有各种猜测，比如同样的链接放在PC上，就变成了一个flash。还有人说这是一个完整的视频，只不过连续放了三段，中间的衔接做得好。这种说法很快就被是否定了，因为第一页的文字是可以复制的，而不是一张图片或视频中的一帧画面。还有第三种说法是这是一张张图片累计做的GIF，显然也不成立。

因此，最终的结论是，这是一个H5。但和之前大家在朋友圈常见到的H5相比，要复杂得多。下面具体说，包括简单分析一下这个H5的代码。

二、这个H5的结构是什么？

“吴亦凡即将入伍”的H5分为5个部分。

1、第一页。这其实是一个H5页面，包括文字+MP4视频+图片。为了让这条“假页面”显得逼真，所以用了文字，包括正文、评论和相关新闻。中间的“照片”是一张照片的同时，其实是正在加载的视频，对于这个自动播放的技术，针对苹果和安卓的机型，体验是不一样的，大叔下面细说。

2、第二页。这一页是整个H5的精华，给了用户一个惊喜。其实就是一个全屏幕播放的视频。但值得一提的是，用户无法自动暂停视频，这其实是为了让用户观看第一页和第二页的时候能够流畅感受，如果停顿一点点，这个作品就失败了。

3、第三页。这个好理解，H5页面，页面模仿微信的视频聊天界面，连微信的背景音乐也不放过，“接听”按钮就是一个视频播放的启动键。

文章内容及图片来自网络，如果侵权，请联系：901070669@qq.com，我们将及时处理；