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

分析：“吴亦凡即将入伍”的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的结构是什么？

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

1、第一页。这其实是一个H5页面，包括文字+MP4视频+图片。为了让这

条“假页面”显得逼真，所以用了文字，包括正文、评论和相关新闻。中间的

“照片”是一张照片的同时，其实是正在加载的视频，对于这个自动播放的技

术，针对苹果和安卓的机型，体验是不一样的，大叔下面细说。

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

2、第二页。这一页是整个H5的精华，给了用户一个惊喜。其实就是一个

全屏幕播放的视频。但值得一提的是，用户无法自动暂停视频，这其实是为了

让用户观看第一页和第二页的时候能够流畅感受，如果停顿一点点，这个作品

就失败了。

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

3、第三页。这个好理解，H5页面，页面模仿微信的视频聊天界面，连微

信的背景音乐也不放过，“接听”按钮就是一个视频播放的启动键。

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

4、第四页。接上面的，又一个全屏幕视频。与第二也不同，第四页的“聊

天视频”是可以暂停的，大叔猜测设计者是希望用户可以重复观看，因为这里

是广告部分。

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

三、吴亦凡跳出新闻页面是怎么做到的？

大叔详细说一下前两页。其实用户再打开这个H5，看到腾讯新闻的页面

时，中间的那个图片背后的视频就在加载了，600多K，加载的时候，用户正好

可以看完全文。上文提到，苹果和安卓用户的体验是不一样的。苹果用户是自

动播放的，这个体验十分顺畅。而安卓用户，可能由于系统本身的问题，是需

要点击那张小照片才能播放，好在几乎所有人应该往下翻看这条“新闻”，你

的手指点在了图片上，实际上就是启动了视频。

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

大叔认为，这是整个H5的精华部分。小视频播放完毕之后，全屏幕视频紧

接着自动播放，由于全屏幕视频开始的背景与新闻页面类似，所以给用户的错

觉是，吴亦凡从新闻页面中跳了出来，这种手法在魔术表演和国外创意剪辑视

频中其实是比较常见的，俗称“