類型：

大小：

評分：

平臺：

標(biāo)簽：

立即下載

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

首先溫習(xí)下這個高大上的廣告吧

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

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

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

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

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

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

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

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