2017年05月10日記一次微項目投產 | 安卓版微信內置瀏覽器不能解析gzip壓縮過的mp4視頻的問題

時間 2019-11-16

標籤 2017年 05月 10日一次項目投產微信內置瀏覽器不能解析 gzip 壓縮 mp4 視頻問題欄目 Android 简体版

原文原文鏈接

前言php

今天投產了一個小項目，一個很簡單的H5，有播放視頻功能，使用了videojs插件。html

以前也作過數個視頻播放，視頻的轉壓都按照既定流程進行，文件放到FTP後，iphone和安卓機測試下來都沒有問題。前端

因而給連接，業務組直接在微信公衆號裏投放了。那個企業號有很多關注的人，推送發出去1分鐘就有近千閱讀量。web

可是我在點擊連接後，發現項目打不開了，並且該企業官網的主站也掛了，在通過pc端和手機4G下測試發現問題依然存在後，趕忙報bug給其餘同事。chrome

經過詢問FTP管理員得知，那個「大」企業的網站帶寬只有10M。假如只是普通H5的話，綽綽有餘，可是如今裏面有個13m的mp4視頻，固然請求量集中飆升的時候，帶寬瞬間耗盡。apache

通過多方協商，高層決定使用緊急方案，把視頻和其餘圖片文件放到咱們公司的一個cdn服務器上，修改H5內的資源連接，使之直接請求cdn，以緩解那個「大」企業網站帶寬不足的問題。segmentfault

前端同事在修改路徑後，又發現了新的問題：瀏覽器

mp4視頻在iphone手機的微信內置瀏覽器內可以正常播放，而測試用的安卓機均提示不能解析。bash

經過網絡搜索，一開始覺得是視頻格式的問題，向視頻來源確認事後排除了。服務器

用於測試的安卓機型

1. 微信6.5.7 華爲P10 PLUS Android 7.0 華爲瀏覽器版本10.7.2.4038

微信內置瀏覽器user agent:

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

華爲瀏覽器user agent:

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

2. 微信6.5.7 三星Galaxy S6 edge+ Android 6.0.1 三星瀏覽器版本4.0.20-47

微信內置瀏覽器user agent:

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

三星瀏覽器user agent:

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

過程

如下是問題解決思路

一樣的視頻文件，在該大企業的網站內時，安卓機是能夠正常播放的。
而視頻文件到了cdn服務器裏，安卓機提示不能解析。
使用chrome瀏覽器的network對比兩邊請求頭(Request Header)和響應頭(Response Header)
發現從cdn服務器請求到的mp4視頻比大企業的網站內請求到的mp4視頻的請求頭多了一行"Accept-Encoding:gzip, deflate, sdch"
發現從cdn服務器請求到的mp4視頻比大企業的網站內請求到的mp4視頻的響應頭多了一行"Content-Encoding: gzip"
進行有針對性的進行搜索

通過查詢發現：

4中請求頭"Accept-Encoding:gzip, deflate, sdch"的含義是瀏覽器告訴服務器，其可以解析的壓縮種類是"gzip, deflate, sdch"；
5中響應頭"Content-Encoding: gzip"的含義是服務器告訴瀏覽器，其所響應的mp4視頻所用的壓縮方式是"gzip"。
cdn服務器會爲了提高效率，配置了給輸出的mp4視頻進行gzip視頻流壓縮，以達到加速的效果。
微信內置瀏覽器不支持gzip壓縮，詳情可見此處。

接着又測試了一下安卓微信內置瀏覽器和安卓默認瀏覽器的視頻播放差別，發現視頻在華爲瀏覽器內是能夠播放的，三星瀏覽器和微信內置瀏覽器不行。而該項目的投放主要是在微信中進行，必需要把微信內置瀏覽器的兼容放在首位。

因而聯繫cdn管理員進行從新配置，關閉mp4的gzip壓縮，當響應頭內的"Content-Encoding: gzip"消失時，測試用安卓機的微信內置瀏覽器也可以播放視頻了。

因爲正式環境已經正常了並且也沒有辦法輸出信息，因而決定在本地搭模擬環境，自由的獲取請求頭和響應頭以觀察區別。

模擬環境

在本機上模擬了一下環境，將一樣的mp4視頻放到目錄內，apache服務器配置了gzip壓縮環境，參照此處。

打開httpd.conf，將下面兩個模塊打開：

LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so

在配置文件中寫入，配置指令可參考Apache模塊 mod_mime文檔和Apache模塊 mod_deflate文檔。

<ifmodule mod_deflate.c>
DeflateCompressionLevel 1
AddOutputFilter DEFLATE mp4
</ifmodule>

建個php，上代碼：

<?php
function get_head($szUrl){
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $szUrl);
    curl_setopt($curl, CURLOPT_HEADER, 1);  //輸出header信息
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);  //不顯示網頁內容
    curl_setopt($curl, CURLOPT_ENCODING, ''); //容許執行gzip
    $data=curl_exec($curl);
    if(!curl_errno($curl))
    {
        $info = curl_getinfo($curl);
        $httpHeaderSize = $info['header_size'];  //header字符串體積
        $pHeader = substr($data, 0, $httpHeaderSize); //得到header字符串
        return $pHeader;
    }else{
        return curl_errno($curl);
    }
}
$header=get_head('http://10.*.*.*/video/video.mp4');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video test</title>
</head>
<body>
<h4>請求頭(Request Header)</h4>
<span>HTTP_USER_AGENT:</span>&nbsp;&nbsp;<?php echo $_SERVER['HTTP_USER_AGENT'] ?><br>
<span>HTTP_ACCEPT_ENCODING:</span>&nbsp;&nbsp;<?php echo $_SERVER['HTTP_ACCEPT_ENCODING'] ?>
<h4>響應頭(Response Header)</h4>
<?php echo str_replace(array("\r\n","\r","\n"),'<br>',$header) ?>
<hr>
<video src="video.mp4" controls="controls">
    您的瀏覽器不支持 video 標籤。
</video>
</body>
</html>