前言
因?yàn)楣ぷ鞯脑颍镁枚紱]有更新博客翩蘸。想寫一些東西所意，可是又不知道寫什么。碼字寫博客這個(gè)東西催首，果然像人體的肌肉一樣扶踊，作為8塊腹肌的我現(xiàn)在表示腹肌合并成一塊。
但是郎任，這并不能代表什么秧耗！作為一個(gè)明明可以靠臉吃飯的人，卻靠才華去吃飯的人舶治，我表示我依舊很自豪分井！耶耶胶台！切克鬧！
街邊大媽：“哎！小伙子韩脏！這墨鏡你到底買不買缩麸！不買趕緊還給我！”
車大棒："買不起赡矢！買不起杭朱！還您墨鏡......"
言歸正傳，今天就分享一下自己在處理移動(dòng)端的遇到一些坑點(diǎn)吹散。
移動(dòng)端Click 300毫秒延遲
一日接到一個(gè)brief弧械，大致就是一個(gè)loading引導(dǎo)頁面，點(diǎn)擊引導(dǎo)頁上面按鈕之后播放視頻空民。視頻播放完之后出現(xiàn)結(jié)束頁刃唐，結(jié)束頁上面掛著2個(gè)按鈕一個(gè)跳向下載鏈接，一個(gè)指向分享界轩。
很好画饥！so，easy浊猾！接到這個(gè)brief我就馬不停蹄的開始干活了抖甘，但是很快出現(xiàn)了一個(gè)問題。在點(diǎn)擊loading頁面播放按鈕的之后葫慎，在loading頁切換到視頻播放頁面會(huì)有一個(gè)短暫的延遲閃屏問題衔彻。這就很尷尬了，剛剛喊的so偷办，easy艰额！這么塊就卡住了，打臉未免太快了爽篷。（雖然經(jīng)常被打臉ing）
我表示不服悴晰，趕緊上網(wǎng)搜索了一下，移動(dòng)端click事件逐工，結(jié)果發(fā)現(xiàn)移動(dòng)端click事件會(huì)有300ms延遲铡溪！
傳說中的雙擊縮放：
這要追溯至 2007 年初。蘋果公司在發(fā)布首款 iPhone 前夕泪喊，遇到一個(gè)問題 —— 當(dāng)時(shí)的網(wǎng)站都是為大屏幕設(shè)備所設(shè)計(jì)的棕硫。于是蘋果的工程師們做了一些約定，應(yīng)對(duì) iPhone 這種小屏幕瀏覽桌面端站點(diǎn)的問題袒啼。
這當(dāng)中最出名的哈扮，當(dāng)屬雙擊縮放(double tap to zoom)纬纪。這也是會(huì)有上述 300 毫秒延遲的主要原因。
雙擊縮放滑肉，顧名思義包各，即用手指在屏幕上快速點(diǎn)擊兩次，iOS 自帶的 Safari 瀏覽器會(huì)將網(wǎng)頁縮放至原始比例靶庙。由于用戶可以進(jìn)行雙擊縮放或者雙擊滾動(dòng)的操作问畅，當(dāng)用戶一次點(diǎn)擊屏幕之后，瀏覽器并不能立刻判斷用戶是確實(shí)要打開這個(gè)鏈接六荒，還是想要進(jìn)行雙擊操作护姆。因此，iOS Safari 就等待 300 毫秒掏击，以判斷用戶是否再次點(diǎn)擊了屏幕卵皂。
鑒于 iPhone 的成功，其他移動(dòng)瀏覽器都復(fù)制了 iPhone Safari 瀏覽器的多數(shù)約定砚亭，包括雙擊縮放灯变。幾乎現(xiàn)在所有的移動(dòng)端瀏覽器都有這個(gè)功能。
------來自與Apple公司的一次six捅膘、six柒凉、six的操作！
解決300ms延遲方案
之后就嘗試就上網(wǎng)搜索篓跛，解決300ms延遲方案的解決方案膝捞。
1、禁用縮放
2愧沟、設(shè)置 viewport 的 device-width
3蔬咬、使用指針事件
4、使用 touchend 事件
上述方法都有采用過沐寺，但是切換成播放視頻的時(shí)候依舊會(huì)出現(xiàn)閃屏林艘。
難道是300ms延遲的問題沒有解決混坞？抓了抓頭狐援，然后思索了一會(huì)。之后用定時(shí)器作了一個(gè)監(jiān)聽究孕，然后用
console.log去輸出檢查結(jié)果啥酱，結(jié)果300ms的問題的確解決了，但是閃屏的問題卻是還是存在的厨诸。
loading頁面淡入處理
絕望的我坐在小板凳靜靜的發(fā)呆镶殷，難道這個(gè)瀏覽器在播放視頻的時(shí)候本身會(huì)有一個(gè)延遲效果。因此會(huì)導(dǎo)致loading頁面與視頻銜接的時(shí)候會(huì)出現(xiàn)一個(gè)間斷的延遲效果微酬，因此就會(huì)出閃屏绘趋？
有了這個(gè)想法之后颤陶，突然靈光一想既然視頻本身會(huì)有一個(gè)延遲。那么我把loading也做一個(gè)延遲處理的效果陷遮。這樣兩邊都延遲一會(huì)滓走，這樣就不會(huì)出現(xiàn)了閃屏現(xiàn)象了。
于是在CSS代碼里面加入一段css代碼
@-webkit-keyframes fadeout500 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
點(diǎn)擊播放按鈕之后帽馋，就給loading頁添加一個(gè)css類名fadeout500闲坎。在Google瀏覽器模擬手機(jī)上面運(yùn)行，很好沒有閃屏問題茬斧。
視頻監(jiān)聽處理
PC上面模擬器沒有問題，高興的我很快拿起了我的安卓手機(jī)開始測(cè)試梗逮。很好也沒有出現(xiàn)閃屏現(xiàn)象项秉，路面暢通，可以隨時(shí)開車慷彤。
開車開到一半的時(shí)候娄蔼，然后看見后臺(tái)哥哥的iPhone 6 Plus正靜靜躺在桌子面强岸。于是停下來坟瓢，打算借后臺(tái)哥哥的iPhone繼續(xù)繼續(xù)開車。當(dāng)我按下播放視頻之后喉磁，很快屏幕一閃跋选。
妖獸涕癣！居然翻車了！這個(gè)閃屏到底是什么鬼呀前标？
'你在視頻播放之后再讓loading頁面消失就不會(huì)出現(xiàn)閃屏了坠韩！' 路過的老大看見坐在板凳上抽風(fēng)的我，淡淡的補(bǔ)充了一句炼列。
‘視頻播放在再消失’順著老大的話語我嘴角跟著念叨一下只搁，然后猛然間所有的思路全部涌現(xiàn)過來了。
所有如果我改變思路俭尖，點(diǎn)擊播放之后先不忙著讓loading頁面消失氢惋，而是控制播放視頻。同時(shí)對(duì)于視頻做一個(gè)監(jiān)聽事件稽犁。
這個(gè)時(shí)候就得用到html5 相關(guān)DOM的事件和屬性
音頻/視頻屬性：currentTime（ 藍(lán)色字體指向MDN文檔說明）
currentTime 設(shè)置或返回音頻/視頻中的當(dāng)前播放位置（以秒計(jì)）
音頻/視頻事件： timeupdate
timeupdate 當(dāng)目前的播放位置已更改時(shí)觸發(fā)焰望。
var loadingController = function () {
if (video.currentTime > 0.01) {
loadingEl.hide(); //loading頁消失
}
}
video.addEventlistener(("timeupdate", loadingController;)
完美的解決，這樣也不用還在首頁加個(gè)什么淡入淡出的效果了已亥，只需要確定視頻播在控制loading消失就ok柿估。
對(duì)了，為了代碼的嚴(yán)謹(jǐn)性陷猫，需要在loading消失的事件前面秫舌，再加一個(gè)事件移出事件監(jiān)聽的妖。
video.removeEventlistener(("timeupdate", loadingController;)
小結(jié)：
以上就是我對(duì)于移動(dòng)端視頻播放閃屏的處理過程一點(diǎn)胡扯八扯
原創(chuàng)文章，文筆有限足陨，才疏學(xué)淺嫂粟，文中若有不正之處，歡迎各位啪啪的打臉賜教墨缘。
我是車大棒星虹，我的目標(biāo)是星辰與大海！
