关于“吴亦凡入伍”H5的背后的技术（前端篇）

收集了两篇文章，一篇是腾讯官方前端设计人员分享的关于视频播放适配中遇到的各种技术问题；一篇是泛泛的整体内容介绍。

另外，知乎上有一个关于“吴亦凡即将入伍h5是怎么制作的？”的话题讨论，供参考。

附：

吴亦凡即将入伍H5原页面地址：http://wefire.qq.com/act/a20150826kris/m/

PC上会自动跳转到 http://wefire.qq.com/act/a20150826kris/pc/，PC端由flash实现，不做讨论。

具体的源码可以通过Chrome模拟手机访问查看。

三段视频http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v1.mp4http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v2.mp4http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v3.mp4可以在chrome下打开控制台，切换成手机模式，打开http://wefire.qq.com/act/a20150826kris/m/稍微分析一下源码就清楚了，点子很赞，营销的逼格也挺高

还有一个类似的H5案例，供参考：

还有一个跟这个差不多的H5技术男神来袭http://www.qiugonglue.com/static/qixi2这个除了点击 还可以滑动的功能

下面是收录的两篇文章：

----------------------------------------------------------------------------------------

关于“吴亦凡入伍”H5的背后的技术（前端篇）

From: http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/374931.shtml

在这个h5刷爆朋友圈的之后，看到网上和km都有同学对背后的技术感兴趣，正好借着机会跟大家分享（吐槽）一下。如果你正好也遇到在android下视频自动播放和两个视频连续播放（中间不需要触发）的问题，希望本文会对你有所帮助。

关于这个H5大概的实现原理，网上已经有人分析的很详细，我这里就不多做介绍了，感兴趣的同学可以点击这里

这次要分享是在兼容android下遇到的难点和兼容的思路：

第一个问题就是为了实现 Page1中里面图片中的人物要突然动起来，然后走出页面，那么video在初始化的时候就不能出现播放的icon，在IOS下设置一个poster就好了， 但在android下video对poster支持不是那么友好，加上会有千奇百怪的初始化播放效果。在不设置controls下，video初始化android各平台的效果 （如下图）

解决方法其实很简单，就是在video上面覆盖一张图片（图片为视频的第一帧），当开始播放的时候，再隐藏这个图片来达到模拟poster的效果。这样做就引发另外一个问题，这个页面的video的宽度是自适应，意思就是宽度和高度会随着屏幕的宽度等比缩放，那么覆盖在video上面这个的高宽也不能是固定的，也要跟着video等比缩放。

这里我们就会用到保持元素宽高比的技巧，为元素添加的padding-top百分比值。因为padding取值百分比时候，是相对于包含块的宽度而定的。我们的视频1比例是580X386,所以padding-top的值为386/580=66.55%。实现代码如下：

<div class="video-box"> <div class="video">插入video...</div> <div class="bg-poster"></div></div>.video-box{position: relative;width: 100% }.video{width: 100%; height: 100% }.bg-poster{width:100%; padding-top: 66.55%; position: absolute; top:0; left:0;  background: url(./bg_poster.jpg) no-repeat 0 0; background-size: cover }

 

第二个就是两个视频连续播放的问题（中间不需要触发），被这个问题折腾了好久。

android下视频播放是需要用户主动触发的。用户主动触发行为比如：touch、click（注意：zepto的tap是触发不了）,类似setInterval此类 或者touch之后setTimeout再播放，都是行不通的。

我们的需求是用户进到页面，当页面滚动一定高度之后，开始播放视频1，视频1播放完毕，不需要用户手动触发接着播放视频2。

转化到前端的逻辑就是说：用户滚动页面一定高度之后，要连续播放视频1,2 中间用户是没有用户触发行为的。

所以当时的解决思路这样的： 当用户有触发行为时，就同时初始化视频1和视频2，给视频1添加ended事件，视频1播放完毕后就直接播放视频2 [v2.play()]

$(document).one("touchstart", function() { $("#v1")[0].play(); setTimeout(function() {$("#v1")[0].pause() }, 200); $("#v2")[0].play(); setTimeout(function() {$("#v2")[0].pause() }, 200);});

 然而现实却很残酷(在android下会提示解析错误或者弹框让你选择文件打开方式) 

既然上面的方法不行，那就用另外一种方法：当用户第一次触屏页面的时候去初始化视频2，然后等用户滚动页面一定高度的时候再去播放视频1，当视频1播放完毕，在回调里面直接播放视频2:

//第一次触屏 初始化 视频2$(document).one("touchstart",function(){$("#v2")[0].play();$("#v2")[0].addEventListener("canplay",function(evt) {$("#v2")[0].pause();});});//滚动页面到一定距离播放视频1var isPlay;$(document).on("touchmove",function(){if (isPlay) return;var d = $("#v1")[0].getBoundingClientRect().bottom;if (d < 120) {$("#v1")[0].play();isPlay = true;}});//视频1 播放完毕回调里播放视频2$("#v1")[0].addEventListener("ended",function(evt) {$("#v2")[0].play();});

 但这样还是会报错，我在想是不是canplay的事件发生的时候，video还没有初始化完成，但文档里面又找不到video初始化完成的API。

于是把逐个看似跟video初始化完成差不多的事件全都试了个遍（感谢2w陪我试各种API）。包括oncanplaythrough oncanplay onplay onplaying onprogress onreadystatechange ontimeupdate... 结果统统都不行，不行... 先不说了，我得先去给我的android测试机充会儿电~

但自己承诺过的需求，含着泪也要完成~ （其实我会告诉你我当时已经开始暗想，当视频1播放完了，我要设计师给加一个按钮，提醒用户去点击,然后播放视频2么.）

后来经过反复调试和测试，发现一个规律，把视频2在自带的控制条上手动触发播放，等开始播放之后，再手动暂定，然后再播放1，等视频1结束后调用视频2 是正常的，也不会报错。很神奇有木有！

基本上可以总结成一个规律：只要视频2已经播放过，哪怕一帧就行，这样当视频1播放完毕之后再play视频2，就是正常的！

好既然找出规律来，那么就好办了，怎么监视视频播放过呢？由于没有现成的api.只能用别的事件来控制了~

因为在之前已试过video的N多事件，这时候该 timeupdate 登场了。 文档解释是：当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。

逻辑就是只要有视频播放的时候，这个事件就会不断地被触发。当有了播放时间（currentTime>0）了，就说明已经播放过了，然后暂停它。等着再次被play();

var v1= $("#v1")[0];var v2= $("#v2")[0];//第一次触屏播放初始化视频2$(document).one("touchstart",function(){v2.play();});//视频1播放完成，回调播放视频2v1.addEventListener("ended",function(evt) {v2.currentTime = 0;v2.play()});//视频2添加事件 监听如果已经播放，就暂停function initVideo(){if (v2.currentTime){v2.pause();v2.removeEventListener("timeupdate", initVideo, false);}}v2.addEventListener("timeupdate", initVideo, false);//滚动页面到一定高度播放视频1var isPlay;$(document).on("touchmove",function(){var d = v1.getBoundingClientRect().bottom;if (isPlay) return;if (d < 120) {v1.play();isPlay = true;}});

 OK了~ 费了九牛二虎之力总算是能兼容android了，心好累。还在继续优化中，试试不能不能只需要一次滚屏事件就完成这个交互，不过又掉进android里面的touchmove  touchend的坑里面去了...待续~

总结： android下  1.不能存在两个初始化的video,会报错   2.没有用户主动触发行为，play()执行是无效的，但在该视频在已经被播放的情况下是可以不用用户主动触发直接Play()是可以的（必须是已经播放过，即使初始化完成，直接Play()也是不行的）。

最后关于兼容腾讯新闻app和IOS自带浏览器的问题在这里就不细说了。另外在某些iphone5和5S在safari下，如果当前页面的后面有全屏的视频，即使不显示，位置也不在视窗内。点击页面时会出现“点透”的BUG，页面上的任何触屏事件都捕获不到，就是触屏事件全被看不到的video抢去(感谢sonic帮忙定位bug)解决方法就在video隐藏的时候设置 width:1px; height:1px; 等到播放的时候再设置成全屏的宽高。

----------------------------------------------------------------------------------------

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

From: http://mp.weixin.qq.com/s?__biz=MjM5MDQwNjY3Mg==&mid=209431356&idx=1&sn=d4084807268fb54596d8119d8ca99d7d&scene=23&srcid=eIJhX8QYYO7xdxu35qSp#rd

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

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

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

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

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

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

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

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

2这个H5的结构是什么？

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

1第一页。腾讯新闻的假页面。

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

2第二页。吴亦凡跳出新闻页面，全屏幕的视频。

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

3第三页。吴亦凡邀你视频聊天。

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

4第四页。吴亦凡视频。

接上面的，又一个全屏幕视频。与第二也不同，第四页的“聊天视频”是可以暂停的，大叔猜测设计者是希望用户可以重复观看，因为这里是广告部分。

5第五页。腾讯游戏“全民突击”的广告页。

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

大叔详细说一下前两页。其实用户再打开这个H5，看到腾讯新闻的页面时，中间的那个图片背后的视频就在加载了，600多K，加载的时候，用户正好可以看完全文。上文提到，苹果和安卓用户的体验是不一样的。苹果用户是自动播放的，这个体验十分顺畅。而安卓用户，可能由于系统本身的问题，是需要点击那张小照片才能播放，好在几乎所有人应该往下翻看这条“新闻”，你的手指点在了图片上，实际上就是启动了视频。

大叔认为，这是整个H5的精华部分。小视频播放完毕之后，全屏幕视频紧接着自动播放，由于全屏幕视频开始的背景与新闻页面类似，所以给用户的错觉是，吴亦凡从新闻页面中跳了出来，这种手法在魔术表演和国外创意剪辑视频中其实是比较常见的，俗称“障眼法”。

4这个H5技术复杂吗？背后的技术团队制作是谁？

上面说了那么多，这个H5到底是做的呢？其实打开这个H5的代码，就能一目了然。制作者在代码中间专门给自己做了一个广告，包括设计是谁，重构是谁，连制作团队的博客都有。各位可以在地址栏输入“http://tgideas.qq.com/”，没错，这是腾讯游戏的官方设计团队做的。

腾讯官方搞的，一定用了什么咱们普通老百姓不会的技术吧。其实没有，这个H5用的技术是“JavaScrpt”。这个也能从代码中看出。据说“JavaScrpt”是互联网最流行的脚本语言，在PC时代很受用。

按照百度百科的解释，“JavaScrpt”一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

5最后，附上腾讯互娱昨晚连夜出的一个官方“解密稿”(部分删减)。

什么人：为什么是吴亦凡？

　　在这个H5刷爆朋友圈的同时，业内也有一些质疑的声音。那么，作为一款男性用户较多的游戏，《全民突击》为什么选择女粉较多的吴亦凡？

　　似乎从策略层面上，这个选择就有些南辕北辙，贻笑大方？这不，马上就有“好事者”洋洋洒洒开始解读评论，表示这里有大问题，那我们就来一起聊聊这里面的“小故事”。

　　《全民突击》是腾讯第一款上线的枪战射击类的手游。基于良好的用户体验和相对不错的市场推动，这款产品很快在同类产品中占据了绝大部分的市场份额，在IOS畅销榜上，这款产品也表现出来不俗的成绩，无论是用户还是媒体对这款产品已经有较多的认知和了解，在这个节点上，摆在我们面前的问题就是是否有机会突破传统意义的FPS或者射击游戏玩家的范畴，进一步扩大这一类产品的用户规模，也算是腾讯游戏在这个领域为业内带来的小小贡献，因此在更广泛的用户中加强产品的认知就成为此轮营销的重点课题。而与明星队长“吴亦凡”的合作营销就成了这里最优选择之一。

　　首先，我们针对核心手游用户——00后90后偶相观的调研中，在未提供名单的情况下，艺人中吴亦凡、张杰和TFboys等都明显拥有者海量的拥趸,而“吴亦凡”的粉丝的显著特点是忠诚度极高。当我们的明星队长明确与粉丝们分享这一优秀产品的时候，拥趸们必然会纷纷加入到《全民突击》中来感受到产品的乐趣。而另一方面，明星队长的粉丝中的女性能很好的协调和创造出优质的游戏社交氛围，必然提升游戏现有玩家的活跃度，同时更好的扩大射击手游的整体用户盘子。当然，吴亦凡这位可爱的明星也正是《全民突击》的深度玩家，选择对游戏有高度认同和兴趣的明星，双方沟通效率更高，双方配合也会更好。

什么事：“入伍”的点子是怎样炼成的？

　　确定了吴亦凡，但到底怎样引起关注？明星代言的玩法和设计已经是市场营销人共同的“痛”，除去前面已经预埋过好些轮的引子，如何在公布“明星队长”吴亦凡加盟的当天能更好的起到社会化的效应，在发布形式的具体创意上我们经历过多轮的脑爆，也产生过好几个方向。

首先最直接的想到了采用明星与粉丝对话的形式，采用打电话+发微信的交互。但这一形式已经不新鲜了，展示出来的效果会比较常规。

　　而第二轮的脑爆的创意是希望利用美漫剧情H5，编一个引人入胜的故事，配合吴亦凡打电话，但实现上略有问题，同样放弃。

　　到了第三轮的时候，则准备实拍，把吴亦凡置身战火纷飞的“全民突击”战场，通过步话机对粉丝喊话。然而即将开工的时候，我们还是觉得没有太大惊喜，放弃。

　　那么，为什么会是“吴亦凡即将入伍”这个创意？实际上，这是一个为吴亦凡量身打造的一个创意。首先吴亦凡因为拍戏，变成了圆寸的发型。“入伍”，这点就一下子就蹦进了团队的头脑中。我们想着，吴亦凡早年在韩国发展，“入伍”是不少韩国男星必然面临的事情，韩国男星入伍新闻每每成为粉丝关注的热点。但已经回到国内发展的吴亦凡还有“入伍”问题？这个疑问和反差更能激起用户的好奇。最终，“吴亦凡即将入伍”的创意，就这么确定下来。

怎么说：不像“营销”的营销素材才是好“新闻”

　　如今的社交媒体上，普通的“营销”素材已经很难引发用户的关注了。即便是手握一个高颜值、高粉丝量的明星，想要引起粉丝以外的更泛大众用户的传播，对我们来说，也是一件很有压力的事情。

　　在确定“吴亦凡即将入伍”的创意之后，我们发现，咦，这个本身就是一条真假难辨的信息。如何强化这种在真假难辨的感觉？团队想到，索性就按照把它做成一条“新闻”去操作。具体实现上，H5的画面完全按照手机新闻客户端的阅读界面去设计，并且“狡猾”的嵌套在“腾讯新闻”的页面之下，总之，尽可能把“新闻”做得像条“新闻”。

用一系列狂拽酷炫的技术无缝呈现，这才能戳中用户G点

　　1.吸睛的 headline，以假乱真的新闻界面；

　　2.男神从新闻页面中跳出，撕下画面；

　　3.视频来电等环节紧凑连接；

　　4.最后吴的亲身视频告白；

　　5.谜底揭晓，原来是入伍全民突击，做明星队长。

　　这个H5一气呵成的创意模块背后，其实更关键的还是执行，做到比想到更重要。如何实现让男神从网页中跳出→将画面撕下→再给粉丝视频来电，这背后需要大量技术重构来支持。

　　为此，包括了视觉，前端，开发，创意，多媒体的小伙伴组成的创意团队也开始就执行难点进行评估。

　　首先就是技术方面，这个H5的元素组成部分有：文字、图片、MP4格式的视频、MP3的音乐，如何保证这些元素无缝衔接？除此之外，新闻页面中的男神突然出现的效果要如何达成？更不用说这个H5需要兼容的多平台和渠道，比如手Q、微信、腾讯新闻、新浪微博等，每个渠道又有iOS和安卓的各种版本，在测试量和兼容性处理方面工作量巨大。

　　当然，酷炫技术只是表象，如何将内容、对象以及要表达的主题通过一系列狂拽酷炫的技术无缝呈现，这才能戳中用户G点。

　　落在这个H5就是一些小的交互细节，比如：新闻页打开多久后让视频自动播放？整个体验过程如何能给用户制造更多惊喜？用户在PC端看到这个页面，能否依然有互动乐趣？最终素材的呈现，整个过程中也有外部伙伴积极配合艺人拍摄的协调和执行，以及文案的最终润色。

从0到1, 用创意继续玩转移动游戏营销

　　从昨晚到今天，很多朋友都有留言问这样的创意是谁想的,但其实，一夜之间刷屏的背后是整个腾讯游戏市场团队针对环境的变化，在思路和做法上不断的创新的一个自然而然的结果，它不是一个偶然的创意，要知道，移动互联网时代，优质的传播素材才是核心引爆点，创意与技术有效结合，就会有奇妙的化学反应。

　　事实上，在移动游戏营销领域，请明星来做营销事件并不是很新鲜的事件，但是基于大众热点和粉丝需求的洞察，再用技术和创意来实现，就会有与众不同的效果。

　　当然现在看来，这个素材也有一些缺憾，比如，我们是不是可以录一段吴亦凡号召粉丝的话来增加用户转发的动机，又比如，我们是不是可以在转发语上面更增加一点病毒性？

　　不过，从昨晚到现在，我们最开心的是，腾讯游戏能以这样的形式和用户进行了如此的沟通，并且在移动端互动广告的模式里抛出了一个石子儿，我们期待它能够引起足够大的涟漪，让这个行业出现更多精彩的创意。

6最最后，大叔想再对“技术即传播”这个理论做一个注解。

1、每次出现一个酷炫的技术或新玩意，朋友圈就被引爆了，这是去中心化传播模式的大背景使然。怎么说呢，在以微信为首的社交媒体时代，传播者可能不再需要传统的媒介渠道，比如大号或门户，做一个H5直接“泄露”到朋友圈，只要它酷炫，就会引起关注。当然，有好的渠道可以缩短引爆的时间。

2、虽然只要有好的技术就会带来大家传播，但事实上，技术永远是工具，服务于创意，而创意才是传播的本源。比如吴亦凡事件，技术手段只是实现了他跳出新闻框的创意。同样的技术手段，甚至你使用的更高超，但如果剧情无法匹配，也无法引爆。这是本与末的问题，虽然道理都懂，但我们可能有时候过分依赖技术能实现什么？而不是我们希望技术要实现什么。

特别感谢：关云藏CEO钱昊先生（没错，他就是做出微信自动抢红包神器APP的人，大叔曾在之前的文章中具体介绍过）、木疙瘩微卡CEO王运城先生（微信贺卡和H5制作牛人）、前京东设计团队技术开发从业者zipor（现在创业，专门做H5）、宜信宜人贷张静、新微互动CEO吴振华（推荐该公司微信服务号：newe0615，专门研究H5的，本文也部分借鉴了老吴的分析文章）等。