吳亦凡即將入伍h5是怎麼製作的?


之前團隊寫過一篇文章記錄,你可以看看 大轉轉FE - 如何製作一個完美的全屏視頻H5


非前端,純業餘推測

這個H5廣告應該存在兩個版本,一個是手機端,一個是PC端,PC端是純Flash實現的:

http://wefire.qq.com/act/a20150826kris/pc/

下面推測手機端的實現邏輯:
原生普通頁面,呈現出騰訊新聞的娛樂頻道頁,騰訊娛樂頻道頁呈現出新聞(文字)+視頻(內嵌播放器),然後轉為視頻拉拽頁面切換場景的效果,電話部分實際只有「接通」按鈕可以使用,目的是為了跳轉最後的通話視頻。

實現邏輯並不難,厲害的是營銷手段與廣告創意,因而引發爆髮型的傳播。


三段視頻
http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v1.mp4
http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v2.mp4
http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v3.mp4
可以在chrome下打開控制台,切換成手機模式,打開
http://wefire.qq.com/act/a20150826kris/m/
稍微分析一下源碼就清楚了,點子很贊,營銷的逼格也挺高


「吳亦凡即將入伍」H5的解剖分析,看微信圖文,裡面有詳細介紹。


1 PC
flash實現
----------------------
2 移動端
分 page
page1 也就是新聞的那一頁 是分開的dom 也是視頻
花屏開始是全屏的視頻
page2 接電話是圖背景+按鈕
page3 通話頁面整個背景是視頻,點擊出現掛電話按鈕,通話按鈕的圖在頁面最上層

主要還是牛逼在idea,技術實現上不太清楚,帶視頻的多終端適配應該比較複雜
你想知道技術細節應該標籤打 前端開發


還有一個跟這個差不多的H5技術
男神來襲
你們點擊看看!!!
這個除了點擊 還可以滑動的功能


樓上的遊戲程序員 顯然刪掉了瀏覽器標識的變數

如果userAgent為ios
videoIndex1就開始播放。
大家苦心找的微信視頻自動播放就是什麼了!!

var v1 = document.getElementById("videoIndex2");
v1.play();
就這兩句js即可搞定,自行測試吧。這不就是...,你知道的。
safari也支持的!!
這個H5技術含量真沒那麼高!!!


h5視頻+按鈕


"吳亦凡即將入伍"的H5技術到底是怎麼實現的? - 萬能的大叔 - 知乎專欄


同求!在Safari打開是沒有效果的,因為Webkit禁止了視頻的自動播放。估計是微信的一個自動播放視頻介面,但並沒有文檔說明。


請問在安卓手機上點擊會全屏播放怎麼解決的? 扒下來的代碼可解決不了哦


我把源碼拷貝下來執行,發現視頻會全屏播放,但是如果在原網址上面看視頻就是正常的,不知道這是一個什麼情況


騰訊官方的回答:
http://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==mid=211730445idx=1sn=37ffd6bec9253ff29bb0ad2584ea0d6ascene=0#rd


是藍色游標的idea。


這個話題挺火,這個h5案例的優點是 視頻沒有控制欄讓人感覺是個圖片 然後會去點擊 ,比較失敗的是視頻里後面的綠背景。這個一看就是再拍東西,好歹你去穿個道具服裝,或者迷彩服這樣更能吸引人呢。
技術方面:現在的代碼是注釋過了 好多功能取消了。估計是過了活動了, PC端時播放的swf文件 移動端是mp4視頻, 我已經扒了個代碼 測試地址可以看看 http://www.shanfuapp.com/kehu/wuyifan .


推薦閱讀:

Web 排版中,左對齊和兩端對齊各有什麼優缺點?不同情況下應該如何選用?
如何評價真阿當的文章:《2016年前端技術觀察》?
好的前端主管是如何帶隊的?
作為一個前端開發實習生,我這樣做是不是特別不厚道?

TAG:前端開發 | 吳亦凡 | H5 廣告 |