分析：“吳亦凡即將入伍”的H5技術到底是怎么實現(xiàn)的

分析：“吳亦凡即將入伍”的H5技術到底是怎么實現(xiàn)的？

對于這事，大叔看到自媒體朋友們迅速地分成了兩派。一派是挺吳派，從各種角度分析這個H5做得好啊，比如滿足了用戶的好奇心，明星效應，標題起的十分嚇人《史上最火H5是如何一夜爆紅的》等等；另一派是倒吳派，也從各種角度分析，認為這個H5的戰(zhàn)略是錯的，比如選錯了代言人，沒有轉(zhuǎn)發(fā)動機和下載游戲的轉(zhuǎn)化率。大叔認為，上面兩派都是扯淡。理由很簡單：1、這個H5火了，當然符合用戶分享規(guī)律和傳播邏輯，轉(zhuǎn)發(fā)的人也不是傻子。2、尤其對吹毛求疵的人說一句，你先做一個原創(chuàng)的10萬+或能刷屏的H5出來給我們瞧瞧，再談轉(zhuǎn)化率。有點跑題了?；氐缴厦娴膯栴}，“吳亦凡即將入伍”的H5到底是如何實現(xiàn)的？大叔認為，所有的創(chuàng)意和驚喜需要在一點點把這個H5“解刨”之后，就能看得清清楚楚。這個可能是完全沒有任何技術背景的大叔和你更希望搞清楚的內(nèi)容。以下是大叔請教多位H5制作達人后，對此事的一個梳理。如有表述有誤，純屬是他們的問題，與大叔無關。一、“吳亦凡即將入伍”到底是一個H5，還是一個視頻(flash)？現(xiàn)在大家都知道這是一個H5，一出來的時候，有各種猜測，比如同樣的鏈接放在PC上，就變成了一個flash。還有人說這是一個完整的視頻，只不過連續(xù)放了三段，中間的銜接做得好。這種說法很快就被是否定了，因為第一頁的文字是可以復制的，而不是一張圖片或視頻中的一幀畫面。還有第三種說法是這是一張張圖片累計做的GIF，顯然也不成立。因此，最終的結論是，這是一個H5。但和之前大家在朋友圈常見到的H5相比，要復雜得多。下面具體說，包括簡單分析一下這個H5的代碼。二、這個H5的結構是什么？“吳亦凡即將入伍”的H5分為5個部分。1、第一頁。這其實是一個H5頁面，包括文字+MP4視頻+圖片。為了讓這條“假頁面”顯得逼真，所以用了文字，包括正文、評論和相關新聞。中間的“照片”是一張照片的同時，其實是正在加載的視頻，對于這個自動播放的技術，針對蘋果和安卓的機型，體驗是不一樣的，大叔下面細說。2、第二頁。這一頁是整個H5的精華，給了用戶一個驚喜。其實就是一個全屏幕播放的視頻。但值得一提的是，用戶無法自動暫停視頻，這其實是為了讓用戶觀看第一頁和第二頁的時候能夠流暢感受，如果停頓一點點，這個作品就失敗了。3、第三頁。這個好理解，H5頁面，頁面模仿微信的視頻聊天界面，連微信的背景音樂也不放過，“接聽”按鈕就是一個視頻播放的啟動鍵。4、第四頁。接上面的，又一個全屏幕視頻。與第二也不同，第四頁的“聊天視頻”是可以暫停的，大叔猜測設計者是希望用戶可以重復觀看，因為這里是廣告部分。三、吳亦凡跳出新聞頁面是怎么做到的？大叔詳細說一下前兩頁。其實用戶再打開這個H5，看到騰訊新聞的頁面時，中間的那個圖片背后的視頻就在加載了，600多K，加載的時候，用戶正好可以看完全文。上文提到，蘋果和安卓用戶的體驗是不一樣的。蘋果用戶是自動播放的，這個體驗十分順暢。而安卓用戶，可能由于系統(tǒng)本身的問題，是需要點擊那張小照片才能播放，好在幾乎所有人應該往下翻看這條“新聞”，你的手指點在了圖片上，實際上就是啟動了視頻。大叔認為，這是整個H5的精華部分。小視頻播放完畢之后，全屏幕視頻緊接著自動播放，由于全屏幕視頻開始的背景與新聞頁面類似，所以給用戶的錯覺是，吳亦凡從新聞頁面中跳了出來，這種手法在魔術表演和國外創(chuàng)意剪輯視頻中其實是比較常見的，俗稱“障眼法”。四、這個H5技術復雜嗎？背后的技術團隊制作是誰？上面說了那么多，這個H5到底是做的呢？其實打開這個H5的代碼，就能一目了然。制作者在代碼中間專門給自己做了一個廣告，包括設計是誰，重構是誰，連制作團隊的博客都有。各位可以在地址欄輸入“/”，沒錯，這是騰訊游戲的官方設計團隊做的。騰訊官方搞的，一定用了什么咱們普通老百姓不會的技術吧。其實沒有，這個H5用的技術是“JavaScrpt”。這個也能從代碼中看出。據(jù)說“JavaScrpt”是互聯(lián)網(wǎng)最流行的腳本語言，在PC時代很受用。按照百度百科的解釋，“JavaScrpt”一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML(標準通用標記語言下的一個應用)網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。五、最后，附上騰訊互娛昨晚連夜出的一個官方“解密稿”(部分刪減)。什么人：為什么是吳亦凡？在這個H5刷爆朋友圈的同時，業(yè)內(nèi)也有一些質(zhì)疑的聲音。那么，作為一款男性用戶較多的游戲，《全民突擊》為什么選擇女粉較多的吳亦凡？似乎從策略層面上，這個選擇就有些南轅北轍，貽笑大方？這不，馬上就有“好事者”洋洋灑灑開始解讀評論，表示這里有大問題，那我們就來一起聊聊這里面的“小故事”?！度裢粨簟肥球v訊第一款上線的槍戰(zhàn)射擊類的手游。基于良好的用戶體驗和相對不錯的市場推動，這款產(chǎn)品很快在同類產(chǎn)品中占據(jù)了絕大部分的市場份額，在IOS暢銷榜上，這款產(chǎn)品也表現(xiàn)出來不俗的成績，無論是用戶還是媒體對這款產(chǎn)品已經(jīng)有較多的認知和了解，在這個節(jié)點上，擺在我們面前的問題就是是否有機會突破傳統(tǒng)意義的FPS或者射擊游戲玩家的范疇，進一步擴大這一類產(chǎn)品的用戶規(guī)模，也算是騰訊游戲在這個領域為業(yè)內(nèi)帶來的小小貢獻，因此在更廣泛的用戶中加強產(chǎn)品的認知就成為此輪營銷的重點課題。而與明星隊長“吳亦凡”的合作營銷就成了這里最優(yōu)選擇之一。首先，我們針對核心手游用戶——00后90后偶相觀的調(diào)研中，在未提供名單的情況下，藝人中吳亦凡、張杰和TFboys等都明顯擁有者海量的擁躉，而“吳亦凡”的粉絲的顯著特點是忠誠度極高。當我們的明星隊長明確與粉絲們分享這一優(yōu)秀產(chǎn)品的時候，擁躉們必然會紛紛加入到《全民突擊》中來感受到產(chǎn)品的樂趣。而另一方面，明星隊長的粉絲中的女性能很好的協(xié)調(diào)和創(chuàng)造出優(yōu)質(zhì)的游戲社交氛圍，必然提升游戲現(xiàn)有玩家的活躍度，同時更好的擴大射擊手游的整體用戶盤子。當然，吳亦凡這位可愛的明星也正是《全民突擊》的深度玩家，選擇對游戲有高度認同和興趣的明星，雙方溝通效率更高，雙方配合也會更好。什么事：“入伍”的點子是怎樣煉成的？確定了吳亦凡，但到底怎樣引起關注？明星代言的玩法和設計已經(jīng)是市場營銷人共同的“痛”，除去前面已經(jīng)預埋過好些輪的引子，如何在公布“明星隊長”吳亦凡加盟的當天能更好的起到社會化的效應，在發(fā)布形式的具體創(chuàng)意上我們經(jīng)歷過多輪的腦爆，也產(chǎn)生過好幾個方向。首先最直接的想到了采用明星與粉絲對話的形式，采用打電話+發(fā)微信的交互。但這一形式已經(jīng)不新鮮了，展示出來的效果會比較常規(guī)。而第二輪的腦爆的創(chuàng)意是希望利用美漫劇情H5，編一個引人入勝的故事，配合吳亦凡打電話，但實現(xiàn)上略有問題，同樣放棄。到了第三輪的時候，則準備實拍，把吳亦凡置身戰(zhàn)火紛飛的“全民突擊”戰(zhàn)場，通過步話機對粉絲喊話。然而即將開工的時候，我們還是覺得沒有太大驚喜，放棄。那么，為什么會是“吳亦凡即將入伍”這個創(chuàng)意？實際上，這是一個為吳亦凡量身打造的一個創(chuàng)意。首先吳亦凡因為拍戲，變成了圓寸的發(fā)型?！叭胛椤保@點就一下子就蹦進了團隊的頭腦中。我們想著，吳亦凡早年在韓國發(fā)展，“入伍”是不少韓國男星必然面臨的事情，韓國男星入伍新聞每每成為粉絲關注的熱點。但已經(jīng)回到國內(nèi)發(fā)展的吳亦凡還有“入伍”問題？這個疑問和反差更能激起用戶的好奇。最終，“吳亦凡即將入伍”的創(chuàng)意，就這么確定下來。怎么說：不像“營銷”的營銷素材才是好“新聞”如今的社交媒體上，普通的“營銷”素材已經(jīng)很難引發(fā)用戶的關注了。即便是手握一個高顏值、高粉絲量的明星，想要引起粉絲以外的更泛大眾用戶的傳播，對我們來說，也是一件很有壓力的事情。在確定“吳亦凡即將入伍”的創(chuàng)意之后，我們發(fā)現(xiàn)，咦，這個本身就是一條真假難辨的信息。如何強化這種在真假難辨的感覺？團隊想到，索性就按照把它做成一條“新聞”去操作。具體實現(xiàn)上，H5的畫面完全按照手機新聞客戶端的閱讀界面去設計，并且“狡猾”的嵌套在“騰訊新聞”的頁面之下，總之，盡可能把“新聞”做得像條“新聞”。用一系列狂拽酷炫的技術無縫呈現(xiàn)，這才能戳中用戶G點1.吸睛的headline，以假亂真的新聞界面；2.男神從新聞頁面中跳出，撕下畫面；3.視頻來電等環(huán)節(jié)緊湊連接；4.最后吳的親身視頻告白；5.謎底揭曉，原來是入伍全民突擊，做明星隊長。這個H5一氣呵成的創(chuàng)意模塊背后，其實更關鍵的還是執(zhí)行，做到比想到更重要。如何實現(xiàn)讓男神從網(wǎng)頁中跳出→將畫面撕下→再給粉絲視頻來電，這背后需要大量技術重構來支持。為此，包括了視覺，前端，開發(fā)，創(chuàng)意，多媒體的小伙伴組成的創(chuàng)意團隊也開始就執(zhí)行難點進行評估。首先就是技術方面，這個H5的元素組成部分有：文字、圖片、MP4格式的視頻、MP3的音樂，如何保證這些元素無縫銜接？除此之外，新聞頁面中的男神突然出現(xiàn)的效果要如何達成？更不用說這個H5需要兼容的多平臺和渠道，比如手Q、微信、騰訊新聞、新浪微博等，每個渠道又有iOS和安卓的各種版本，在測試量和兼容性處理方面工作量巨大。當然，酷炫技術只是表象，如何將內(nèi)容、對象以及要表達的主題通過一系列狂拽酷炫的技術無縫呈現(xiàn)，這才能戳中用戶G點。落在這個H5就是一些小的交互細節(jié)，比如：新聞頁打開多久后讓視頻自動播放？整個體驗過程如何能給用戶制造更多驚喜？用戶在PC端看到這個頁面，能否依然有互動樂趣？最終素材的呈現(xiàn)，整個過程中也有外部伙伴積極配合藝人拍攝的協(xié)調(diào)和執(zhí)行，以及文案的最終潤色。從0到1，用創(chuàng)意繼續(xù)玩轉(zhuǎn)移動游戲營銷從昨晚到今天，很多朋友都有留言問這樣的創(chuàng)意是誰想的，但其實，一夜之間刷屏的背后是整個騰訊游戲市場團隊針對環(huán)境的變化，在思路和做法上不斷的創(chuàng)新的一個自然而然的結果，它不是一個偶然的創(chuàng)意，要知道，移動互聯(lián)網(wǎng)時代，優(yōu)質(zhì)的傳播素材才是核心引爆點，創(chuàng)意與技術有效結合，就會有奇妙的化學反應。事實上，在移動游戲營銷領域，請明星來做營銷事件并不是很新鮮的事件，但是基于大眾熱點和粉絲需求的洞察，再用技術和創(chuàng)意來實現(xiàn)，就會有與眾不同的效果。當然現(xiàn)在看來，這個素材也有一些缺憾，比如，我們是不是可以錄一段吳亦凡號召粉絲的話來增加用戶轉(zhuǎn)發(fā)的動機，又比如，我們是不是可以在轉(zhuǎn)發(fā)語上面更增加一點病毒性？不過，從昨晚到現(xiàn)在，我們最開心的是，騰訊游戲能以這樣的形式和用戶進行了如此的溝通，并且在移動端互動廣告的模式里拋出了一個石子兒，我們期待它能夠引起足夠大的漣漪，讓這個行業(yè)出現(xiàn)更多精彩的創(chuàng)意。六、最最后，大叔想再對“技術即傳播”這個理論做一個注解。1、每次出現(xiàn)一個酷炫的技術或新玩意，朋友圈就被引爆了，這是去中心化傳播模式的大背景使然。怎么說呢，在以微信為首的社交媒體時代，傳播者可能不再需要傳統(tǒng)的媒介渠道，比如大號或門戶，做一個H5直接“泄露”到朋友圈，只要它酷炫，就會引起關注。當然，有好的渠道可以縮短引爆的時間。2、雖然只要有好的技術就會帶來大家傳播，但事實上，技術永遠是工具，服務于創(chuàng)意，而創(chuàng)意才是傳播的本源。比如吳亦凡事件，技術手段只是實現(xiàn)了他跳出新聞框的創(chuàng)意。同樣的技術手段，甚至你使用的更高超，但如果劇情無法匹配，也無法引爆。這是本與末的問題，雖然道理都懂，但