類型：

大�。�

評分：

平臺：

標簽：

立即下載

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

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

關于這個H5大概的實現(xiàn)原理，網(wǎng)上已經(jīng)有人分析的很詳細，我這里就不多做介紹了。

這次要分享是在兼容android下遇到的難點和兼容的思路：

第一個問題就是為了實現(xiàn) Page1中里面圖片中的人物要突然動起來，然后走出頁面，那么video在初始化的時候就不能出現(xiàn)播放的icon，在IOS下設置一個poster就好了， 但在android下video對poster支持不是那么友好，加上會有千奇百怪的初始化播放效果：

在不設置controls下，video初始化android各平臺的效果 （如下圖）

解決方法其實很簡單，就是在video上面覆蓋一張圖片（圖片為視頻的第一幀），當開始播放的時候，再隱藏這個圖片來達到模擬poster的效果。這樣做就引發(fā)另外一個問題，這個頁面的video的寬度是自適應，意思就是寬度和高度會隨著屏幕的寬度等比縮放，那么覆蓋在video上面這個的高寬也不能是固定的，也要跟著video等比縮放。

這里我們就會用到保持元素寬高比的技巧，為元素添加的padding-top百分比值。因為padding取值百分比時候，是相對于包含塊的寬度而定的。我們的視頻1比例是580X386,所以padding-top的值為386/580=66.55%。實現(xiàn)代碼如下：

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

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