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