吳亦凡入伍廣告是用什麼軟件做的 H5技術怎麼實現[多圖]

“吳亦凡即將入伍”的H5廣告之前可說是刷爆了朋友圈，不少同學看完後第一反應就是——好牛（嗶），那麼這種效果用H5技術怎麼實現呢？感興趣的小夥伴不妨和嗨客小編一起來學習下~

首先溫習下這個高大上的廣告吧

關於這個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%。實現代碼如下：

第二個就是兩個視頻連續播放的問題（中間不需要觸發）。

android下視頻播放是需要用戶主動觸發的。用戶主動觸發行為比如：touch、click（注意：zepto的tap是觸發不了）,類似setInterval此類 或者touch之後setTimeout再播放，都是行不通的。