国产在线精品一区二区三区直播,国产亚洲精品第一综合另类灬,国产精品,久久久久久久,国产精品久久久久久久免费看,国产一区二区三区日韩精品

嗨客手機(jī)站:值得大家信賴的手機(jī)軟件游戲站! 最新游戲 | 最新軟件 | 游戲更新 | 軟件更新 | 最新合集

關(guān)注嗨客手機(jī)app

禮包、游戲、app應(yīng)有盡有

您的位置:首頁(yè)手機(jī)軟件軟件教程 → 吳亦凡入伍廣告是用什么軟件做的 H5技術(shù)怎么實(shí)現(xiàn)

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

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

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

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

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

在不設(shè)置controls下,video初始化android各平臺(tái)的效果 (如下圖)

吳亦凡入伍廣告是用什么軟件做的 H5技術(shù)怎么實(shí)現(xiàn)圖片1

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


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

吳亦凡入伍廣告是用什么軟件做的 H5技術(shù)怎么實(shí)現(xiàn)圖片2

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

吳亦凡入伍廣告是用什么軟件做的 H5技術(shù)怎么實(shí)現(xiàn)圖片3

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

我們的需求是用戶進(jìn)到頁(yè)面,當(dāng)頁(yè)面滾動(dòng)一定高度之后,開(kāi)始播放視頻1,視頻1播放完畢,不需要用戶手動(dòng)觸發(fā)接著播放視頻2。

轉(zhuǎn)化到前端的邏輯:用戶滾動(dòng)頁(yè)面一定高度之后,要連續(xù)播放視頻1,2 中間用戶是沒(méi)有用戶觸發(fā)行為的。

解決思路: 當(dāng)用戶有觸發(fā)行為時(shí),就同時(shí)初始化視頻1和視頻2,給視頻1添加ended事件,視頻1播放完畢后就直接播放視頻2 [v2.play()]


吳亦凡入伍廣告是用什么軟件做的 H5技術(shù)怎么實(shí)現(xiàn)圖片4

然而現(xiàn)實(shí)卻很殘酷(在android下會(huì)提示解析錯(cuò)誤或者彈框讓你選擇文件打開(kāi)方式)

吳亦凡入伍廣告是用什么軟件做的 H5技術(shù)怎么實(shí)現(xiàn)圖片5

既然上面的方法不行,那就用另外一種方法:當(dāng)用戶第一次觸屏頁(yè)面的時(shí)候去初始化視頻2,然后等用戶滾動(dòng)頁(yè)面一定高度的時(shí)候再去播放視頻1,當(dāng)視頻1播放完畢,在回調(diào)里面直接播放視頻2:

吳亦凡入伍廣告是用什么軟件做的 H5技術(shù)怎么實(shí)現(xiàn)圖片6

但這樣還是會(huì)報(bào)錯(cuò),我在想是不是canplay的事件發(fā)生的時(shí)候,video還沒(méi)有初始化完成,但文檔里面又找不到video初始化完成的API。

于是把逐個(gè)看似跟video初始化完成差不多的事件全都試了個(gè)遍,包括oncanplaythrough oncanplay onplay onplaying onprogress onreadystatechange ontimeupdate... 結(jié)果統(tǒng)統(tǒng)都不行。

后來(lái)經(jīng)過(guò)反復(fù)調(diào)試和測(cè)試,發(fā)現(xiàn)一個(gè)規(guī)律,把視頻2在自帶的控制條上手動(dòng)觸發(fā)播放,等開(kāi)始播放之后,再手動(dòng)暫定,然后再播放1,等視頻1結(jié)束后調(diào)用視頻2 是正常的,也不會(huì)報(bào)錯(cuò)。

基本上可以總結(jié)成一個(gè)規(guī)律:只要視頻2已經(jīng)播放過(guò),哪怕一幀就行,這樣當(dāng)視頻1播放完畢之后再play視頻2,就是正常的!


好既然找出規(guī)律來(lái),那么就好辦了,怎么監(jiān)視視頻播放過(guò)呢?由于沒(méi)有現(xiàn)成的api.只能用別的事件來(lái)控制了~

因?yàn)樵谥耙言囘^(guò)video的N多事件,這時(shí)候該 timeupdate 登場(chǎng)了。 文檔解釋是:當(dāng)播放位置改變時(shí)(比如當(dāng)用戶快進(jìn)到媒介中一個(gè)不同的位置時(shí))運(yùn)行的腳本。

邏輯就是只要有視頻播放的時(shí)候,這個(gè)事件就會(huì)不斷地被觸發(fā)。當(dāng)有了播放時(shí)間(currentTime>0)了,就說(shuō)明已經(jīng)播放過(guò)了,然后暫停它。等著再次被play();

吳亦凡入伍廣告是用什么軟件做的 H5技術(shù)怎么實(shí)現(xiàn)圖片7

兼容android嘗試能不能只需要一次滾屏事件就完成這個(gè)交互,不過(guò)又掉進(jìn)android里面的touchmove、touchend的坑里。


總結(jié)Android下

一、不能存在兩個(gè)初始化的video,會(huì)報(bào)錯(cuò)

二、沒(méi)有用戶主動(dòng)觸發(fā)行為,play()執(zhí)行是無(wú)效的,但在該視頻在已經(jīng)被播放的情況下是可以不用用戶主動(dòng)觸發(fā)直接Play()是可以的(必須是已經(jīng)播放過(guò),即使初始化完成,直接Play()也是不行的)。


最后關(guān)于兼容騰訊新聞app和IOS自帶瀏覽器的問(wèn)題在這里就不細(xì)說(shuō)了。另外在某些iphone5和5S在safari下,如果當(dāng)前頁(yè)面的后面有全屏的視頻,即使不顯示,位置也不在視窗內(nèi)。點(diǎn)擊頁(yè)面時(shí)會(huì)出現(xiàn)“點(diǎn)透”的BUG,頁(yè)面上的任何觸屏事件都捕獲不到,就是觸屏事件全被看不到的video搶去,解決方法就在video隱藏的時(shí)候設(shè)置 width:1px; height:1px; 等到播放的時(shí)候再設(shè)置成全屏的寬高。

想學(xué)習(xí)怎么做的同學(xué)看完有沒(méi)有收獲呢?是不是手癢了?趕緊自己也去試試吧~

50%

我支持

0

50%

我反對(duì)

0

猜你喜歡

網(wǎng)友評(píng)論

發(fā)表評(píng)論

(您有什么想法和意見(jiàn),都能在評(píng)論區(qū)留言哦。)