微信開發(fā)---video視頻播放
2019-08-30 18:16:04
微信視頻是我在開發(fā)一個(gè)微信網(wǎng)站的時(shí)候遇到的一個(gè)問題,相信有很多人遇到過,所以記錄一下,方便下次遇到類似的問題時(shí)可以快速排查。
根據(jù)客戶要求,一個(gè)頁(yè)面里的視頻要求不影響頁(yè)面加載速度,頁(yè)面加載以后就要播放,播放完畢以后要把視頻隱藏掉。覺得沒有啥問題,就和客戶說可以了,然后就可是寫。
為了不影響網(wǎng)頁(yè)加載速度,使用了js把視頻video插入頁(yè)面,然后寫了一個(gè)監(jiān)控,播放視頻,等視頻播放完畢,在把視頻隱藏,一切看起來很完美,本地測(cè)試也沒有問題,線上測(cè)試也很好,可是發(fā)給客戶就不行了,頁(yè)面加載視頻不播放,點(diǎn)擊視頻播放直接全屏播放,而且播放過程中視頻還會(huì)遮擋到別的彈窗。和客戶溝通了半天,才知道客戶是直接在微信中打開的,知道了以后直接先百度問題,隨便找了一個(gè),用同事的果X看了一下,除了不能自動(dòng)播放,其他的都沒有問題了,然后繼續(xù)上網(wǎng)找答案,偶然發(fā)現(xiàn)微信官方文檔里面說,視頻播放必須要點(diǎn)擊動(dòng)作才能觸發(fā)播放,無奈,和客戶溝通了一下,等待客戶反饋。結(jié)果是安卓手機(jī)全屏播放,會(huì)遮擋彈窗,蘋果手機(jī)已經(jīng)正常了。
說到這的時(shí)候,有一點(diǎn)小奔潰了,查看了官方文檔《X5內(nèi)核視頻之問答匯總》X5內(nèi)核視頻在用戶點(diǎn)擊后默認(rèn)會(huì)進(jìn)入全屏播放,前端可以設(shè)置video的x5-playsinline屬性來將視頻限定于網(wǎng)頁(yè)內(nèi)部播放,這個(gè)說的很詳細(xì),
按照文檔處理了一下,用自己的安卓手機(jī)試了一下,沒毛病,同事卻反饋蘋果不行了。當(dāng)時(shí)就傻眼了,返回仔細(xì)看了一下文檔,才發(fā)現(xiàn)安卓和蘋果是有區(qū)別的,安卓用的是X5瀏覽器內(nèi)核,蘋果的不是,無奈,只好在js里加了一個(gè)判斷,判斷用戶手機(jī)是蘋果還是安卓的,分開操作。再次測(cè)試,兩端都通過了,終于舒了一口氣。
代碼先貼出來,寫的比較糙,歡迎大家批評(píng)指點(diǎn)