今天給客戶做一個微信端的HTML5的動畫頁面,頁面內有一個視頻文件,今天上線,這是前提。剛上線不久,客戶的服務器便不堪重負,為了解決問題,我們將該頁面的媒體文件放在自己的服務器上。問題來了,轉移媒體文件之后,發現在安卓機上視頻報出解析錯誤(當時測試機型為華為和三星,由於公司大部分都是iphone黨,安卓機型有限)。
視頻播放使用的是video標簽形式,通過三方包 videojs。遂bing、google查之,發現網上關於這塊內容不多,在X5論壇上也有人報出這個問題,但沒有解決方案。當我們發現一個問題,在客戶的服務器上沒有遇到解析錯誤的問題,iphone上沒有,chrome上沒有。當然首先想到,兩個服務器,一個報錯一個沒報錯,便把問題矛頭指向服務器配置上。然后問題提交給服務器端,最終發現是由於服務器開啟了gzip壓縮(關於gzip壓縮下次詳解),對視頻文件進行壓縮后傳給瀏覽器。
最終在服務器端關閉gzip壓縮,一切回歸正常。視頻正常播放。

總結
遇到視頻解析異常,感覺到是服務器端的配置的偏差,卻沒有想到服務器端的數據壓縮上。當然給以后開發過程提供一條思路,如上圖中,可以查看響應頭信息,進行一些排查,如果有朋友遇到類似問題,不妨先查看下服務器端是否開啟了文件壓縮。
在這里對一些機型進行了測試,以下機型各個瀏覽器,在不開啟視頻壓縮的情況下,可以正常播放。以下主要是在開啟壓縮情況下的數據
測試機型一
- 華為安卓7.0
- 微信6.5.7
通過測試安卓手機端的請求信息,安卓下微信內置瀏覽器的請求頭部中 Accept-Encoding 字段參數信息為 gzip,deflate 與手機內自帶瀏覽器相同,說明在請求時瀏覽器想服務器表明自己支持的壓縮方式為此兩種,不同的是微信內置瀏覽器不支持gzip壓縮的視頻文件, 而安卓自帶瀏覽器只是gzip壓縮后的視頻
測試機型二
- 三星
- 微信6.5.7
通過測試安卓手機端的請求信息,安卓下微信內置瀏覽器的請求頭部中 Accept-Encoding 字段參數信息為 gzip,deflate , 手機內自帶瀏覽器多一種sdch的壓縮方式,此兩種瀏覽器對於gzip壓縮的視頻文件都不能正常解析播放
華為內置瀏覽器
userAgent: Mozilla/5.0 (Linux; Android 7.0; VKY-AL00 Build/HUAWEIVKY-AL00) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Accept-Encoding: gzip, deflate
華為下微信內置瀏覽器
userAgent: Mozilla/5.0 (Linux; Android 7.0; VKY-AL00 Build/HUAWEIVKY-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043220 Safari/537.36 MicroMessenger/6.5.7.1041 NetType/WIFI Language/zh_CN
Accept-Encoding: gzip, deflate
三星內置瀏覽器的請求信息
userAgent: Mozilla/5.0 (Linux; Android 6.0.1; SAMSUNG SM-G9280 Build/MMB29K) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/4.0 Chrome/44.0.2403.133 Mobile Safari/537.36
Accept-Encoding: gzip, deflate, sdch
三星微信內置瀏覽器的請求信息
userAgent: Mozilla/5.0 (Linux; Android 6.0.1; SM-G9280 Build/MMB29K; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043220 Safari/537.36 MicroMessenger/6.5.7.1041 NetType/WIFI Language/zh_CN
Accept-Encoding: gzip, deflate
暫時還未有更好的解決方案,為了適應各手機,所以對於需要在移動端頁面播放的視頻文件還是不要在服務器端進行壓縮。當然如果你的用戶群體都是iphone黨,也是可以的嘛,哈哈哈哈哈
