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

11-27

之前團隊寫過一篇文章記錄，你可以看看大轉轉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 .