html5的video已經(jīng)出來(lái)很久了。在IOS上使用基本上沒(méi)什么毛病，但是Android/ target=_blank class=infotextkey>安卓下就是一個(gè)重災(zāi)區(qū)了，各種體驗(yàn)差。這幾天搞了安卓的兼容，簡(jiǎn)直是要吐血。所以特意總結(jié)了一些強(qiáng)勢(shì)的坑點(diǎn)。
常用的一些屬性和方法
video.error // null正常 video.error.code // 1用戶終止 2網(wǎng)絡(luò)錯(cuò)誤 3解碼錯(cuò)誤 4URL無(wú)效 video.currentTime // 當(dāng)前播放的位置，賦值可改變位置 video.duration // 當(dāng)前資源長(zhǎng)度，流返回?zé)o限 video.paused // 是否暫停 video.ended // 是否結(jié)束 video.autoPlay // 是否自動(dòng)播放 loadstart // 客戶端開(kāi)始請(qǐng)求數(shù)據(jù) error // 請(qǐng)求數(shù)據(jù)時(shí)遇到錯(cuò)誤（可以通過(guò)上一頁(yè)的屬性video.error.code查看具體錯(cuò)誤原因） play // 開(kāi)始播放時(shí)觸發(fā) pause // 暫停時(shí)觸發(fā) loadeddata // 數(shù)據(jù)已加載 waiting // 等待數(shù)據(jù)，并非錯(cuò)誤 playing // play觸發(fā)后執(zhí)行一次 canplaythrough // 可以播放，已加載好 timeupdate // 播放時(shí)間改變 durationchange // 資源長(zhǎng)度改變 ...
坑（本次主要是在微信X5瀏覽器中的測(cè)試，其他安卓瀏覽器下表現(xiàn)不一定一致）
自動(dòng)播放
在ios上會(huì)自動(dòng)全屏播放，需要在video標(biāo)簽上設(shè)置一個(gè)屬性 webkit-playsinline，ios10及以上版本屬性名改成 playsinline。安卓上，無(wú)法自動(dòng)播放，必須手動(dòng)觸發(fā)視頻的播放。調(diào)用任何方法都沒(méi)用，據(jù)說(shuō)這個(gè)為了幫用戶省流量而設(shè)定的。但是安卓在首次觸發(fā)之后，再次觸發(fā)可以通過(guò)調(diào)用 .play 來(lái)觸發(fā)播放視頻。因此做兼容的時(shí)候可以設(shè)一個(gè)判斷是否首次播放的標(biāo)志來(lái)處理。
默認(rèn)樣式
安卓下，不能自動(dòng)播放，因此視頻在播放前會(huì)帶有視頻的默認(rèn)白色加圓圈播放按鈕且背景是純黑色，可以說(shuō)是非常丑陋了。為了好點(diǎn)的用戶體驗(yàn)就是可以在視頻的最上層覆蓋一張引導(dǎo)用戶點(diǎn)擊播放視頻的引導(dǎo)圖，這樣既不丑陋又讓用戶知道這里需要點(diǎn)一下才有東西出現(xiàn)。我的做法是增加一個(gè)手指引導(dǎo)圖，然后讓該元素可穿透(即設(shè)置 pointer-events:none; 讓其不會(huì)成為任何鼠標(biāo)事件的target)，這樣點(diǎn)擊元素的時(shí)候就相當(dāng)于點(diǎn)擊了視頻播放。然后監(jiān)聽(tīng) playing 事件，如果視頻開(kāi)始播放了則把引導(dǎo)圖隱藏。具體如下：
<div class="entry_video" id="entry_video">
<video class="entry_video_con" id="video" webkit-playsinline playsinline src="//wq.360buyimg.com/fd/h5/1707/entryvideo/images/meirenyu_7f7e46da.mp4" autoplay="true"></video>
<div class="guide" style="width: 100%;height: 100%;top: 0;left:0;position: absolute;pointer-events:none;">
<img src="//img11.360buyimg.com/jdphoto/s750x1334_jfs/t5668/219/7883436652/42409/2a1e4cc0/5976a71bN212dfa7b.png" alt="" style="width:100%;height:100%;pointer-events:none;">
</div>
</div>
vi.addEventListener('playing',function(){
$('.guide').hide();
})
全屏播放
若頁(yè)面中沒(méi)有其他內(nèi)容，只是播放一個(gè)視頻的話，這個(gè)問(wèn)題很好處理。設(shè)置webkit-playsinline，如果是在X5內(nèi)核瀏覽器的話，設(shè)置 x5-video-player-type="h5" x5-video-player-fullscreen="true"。
那么問(wèn)題來(lái)了，如果頁(yè)面上不只有視頻，還有其他內(nèi)容呢，例如視頻是在一個(gè)彈出層中。這樣設(shè)置的話，頁(yè)面原有內(nèi)容會(huì)有一個(gè)1s左右的非常明顯拉伸過(guò)程，這個(gè)拉伸過(guò)程就是為全屏播放視頻做準(zhǔn)備的。但是這樣的體驗(yàn)可以說(shuō)是非常糟糕了。于是這種情況下，必須舍棄設(shè)置全屏播放了，但是在X5瀏覽器非全屏播放模式下，安卓會(huì)在視頻頁(yè)面右上角自動(dòng)生成一個(gè)全屏按鈕，這個(gè)怎么都去不掉。若用戶點(diǎn)擊了進(jìn)入全屏模式，視頻播放完畢并不會(huì)停留在視頻最后一幀，而是出現(xiàn)騰訊的一些視頻推送，你懂的。這個(gè)時(shí)候退出了全屏播放的話，視頻會(huì)自動(dòng)隱藏，所以最好做一張視頻底圖，不然就尷尬了。
x5下檢測(cè)全屏
vi.addEventListener("x5videoenterfullscreen", function(){
//進(jìn)入全屏
});
vi.addEventListener("x5videoexitfullscreen", function(){
//退出全屏
});
用 video.addEventListener("x5videoexitfullscreen", function(){….}); 可以檢測(cè)到視頻什么時(shí)候退出了全屏，但是若在這個(gè)監(jiān)聽(tīng)到退出之后隱藏整個(gè)視頻，則再次觸發(fā)播放視頻事件失效。且在這個(gè)監(jiān)聽(tīng)中直接調(diào)用 .play 方法并不能使視頻重新播放。也就是說(shuō)在檢測(cè)過(guò)程中不能對(duì)視頻進(jìn)行一些隱藏，刪除的操作。可以說(shuō)，這檢測(cè)也沒(méi)什么意義了。
詭異的坑
安卓下，若是搖一搖在彈出層播放視頻，若彈出層中有外鏈，點(diǎn)擊了跳轉(zhuǎn)，再返回，這個(gè)時(shí)候 video 會(huì)有一個(gè)詭異的bug，具體表現(xiàn)為返回后第一次能正常觸發(fā)，第二次之后觸發(fā)都直接播到視頻最后一幀，設(shè)置 currentTime、start 為0再播放，或者先 pause 再 play 都沒(méi)有用，必須銷毀重建。
區(qū)分設(shè)備
由于video在ios下表現(xiàn)良好，所以做兼容的時(shí)候，可以通過(guò) userAgent 來(lái)做分別做處理。如：
var vi = document.getElementsByTagName('video')[0];
var ua = navigator.userAgent;
if(ua.indexOf('iphone') <= -1){
shakeWrap.show();
if(!firstVideoLoad){
vi.currentTime = 0;
vi.start = 0;
vi.play();
}
vi.addEventListener('playing',function(){
firstVideoLoad = false;
$('.guide').hide();
})
}else{
vi.play();
}
}
微信固定入口的一些奇特bug
- 必須要等到微信的jsbridge ready了才能觸發(fā).play，否則不會(huì)自動(dòng)執(zhí)行。
document.addEventListener("WeixinJSBridgeReady", function() {
$("#video")[0].play();
});
2.在固定入口內(nèi)，且 jsbridge ready 了，如果使用搖一搖，也無(wú)法觸發(fā) .play。需要在搖一搖之前預(yù)先加載如下：
document.addEventListener("WeixinJSBridgeReady", function() {
var vi = document.getElementsByTagName('video')[0];
vi.load();
vi.pause();
window.addEventListener('devicemotion', deviceMotionHandler, false);
});
3.微信固定入口在沒(méi)有使用jsbridge，而是通過(guò)點(diǎn)擊來(lái)播放的點(diǎn)擊事件，只能是click事情，不能是touchstart事件。
作者：winty
鏈接：https://juejin.im/post/5d8046345188253849631aa6
