2017年05月10日记一次微项目投产 | 安卓版微信内置浏览器不能解析gzip压缩过的mp4视频的问题
前言
今天投产了一个小项目，一个很简单的H5，有播放视频功能，使用了videojs插件。
之前也做过数个视频播放，视频的转压都按照既定流程进行，文件放到FTP后，iphone和安卓机测试下来都没有问题。
于是给链接，业务组直接在微信公众号里投放了。那个企业号有不少关注的人，推送发出去1分钟就有近千阅读量。
但是我在点击链接后，发现项目打不开了，而且该企业官网的主站也挂了，在经过pc端和手机4G下测试发现问题依然存在后，赶紧报bug给其他同事。
通过询问FTP管理员得知，那个“大”企业的网站带宽只有10M。假如只是普通H5的话，绰绰有余，但是现在里面有个13m的mp4视频，当然请求量集中飙升的时候，带宽瞬间耗尽。
经过多方协商，高层决定使用紧急方案，把视频和其他图片文件放到我们公司的一个cdn服务器上，修改H5内的资源链接，使之直接请求cdn，以缓解那个“大”企业网站带宽不足的问题。
前端同事在修改路径后，又发现了新的问题：
mp4视频在iphone手机的微信内置浏览器内能够正常播放，而测试用的安卓机均提示不能解析。
通过网络搜索，一开始以为是视频格式的问题，向视频来源确认过后排除了。
用于测试的安卓机型
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> <?php echo $_SERVER['HTTP_USER_AGENT'] ?><br>
<span>HTTP_ACCEPT_ENCODING:</span> <?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>
使用PC端chrome运行后，页面如下图，同一局域网内手机也能够获取差不多的数据。
同一局域网内华为P10PLUS微信内置浏览器和华为浏览器运行video test的截图如下：
三星Galaxy S6 edge+微信内置浏览器和三星默认浏览器运行video test的截图如下：
经过测试后，证实了安卓版微信6.5.7内置浏览器不能正确处理gzip压缩过的视频的问题。
总结
正式环境发现问题，经过本机模拟环境验证，得出的结论是：
测试安卓机的微信版本6.5.7的内置浏览器没有正确解压gzip的功能，或者解压gzip功能损坏。
该问题仅限于安卓微信版本6.5.7还是其他已经没有办法继续，毕竟公司内能拿来的安卓机都拿来测过了，暂时先写下这么一篇笔记，做个记录。
在微信内置浏览器中播放视频，当iphone可以播放，安卓无法播放时，可以考虑是否是安卓版微信无法正常处理gzip的问题。
同时也总结出一个教训，当投放的内容有占用大带宽(视频)的操作时，要先了解清楚投放网站的带宽，做好备选措施。比如这次事故，假如提前做好调查和上级打好招呼，至少可以省掉部份协商的时间。
Reference
Apache HTTP Server 版本2.2指令索引
Apache启用GZIP压缩优化网站
微信内置浏览器不支持gzip压缩
mod_gzip和mod_deflate的区别
Which browsers handle 'Content-Encoding: gzip'
HTTP 协议中的 Content-Encoding
How to set Content-Encoding with gzip
2017年05月10日记一次微项目投产 | 安卓版微信内置浏览器不能解析gzip压缩过的mp4视频的问题的更多相关文章
- 微信内置浏览器http请求10秒内接收不到数据会自动重发第二遍请求
微信内置浏览器http请求10秒内接收不到数据会自动重发第二遍请求 这是个坑
- 【2017年9月10日更新】ABP配套代码生成器(ABP Code Generator)帮助文档，实现快速开发
ABP代码生成器介绍 ABP Code Generator 针对abp这个框架做了一个代码生成器,功能强大.分为两大功能点,一个是数据层,一个是视图层. 数据服务层:通过它,可以实现表设计.领域层初始 ...
- JQuery基本知识、选择器、事件、DOM操作、动画--2017年2月10日
$(对象)可以将JS对象转换为JQuery对象 .get(0)可以将JQuery对象转换为JS对象 并无太大区别,灵活点出即可
- [转]微信JSAPI 微信内置JSAPI 2015年1月官方正式API接口，分享完整实例
FROM : http://www.oschina.net/code/snippet_2276613_45290 HTML通过微信,分享朋友圈出发此JSAPI <?php require_onc ...
- 免费公共DNS服务器IP地址大全（2017年6月24日）
收集全球各个常用公共DNS服务器 IP地址,欢迎各位朋友评论补充! 国内常用公共DNS 114 DNS: (114.114.114.114: 114.114.115.115) 114DNS安全版 ...
- plsql developer 10注册码----亲测截止2017年5月6可用
亲测截止2017年5月6可用 Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769password:xs374ca
- 导航狗IT周报-2018年05月27日
原文链接:https://www.daohanggou.cn/2018/05/27/it-weekly-9/ 摘要: “灰袍技能圈子”将闭圈:物理安全:为什么我们现在的生活节奏越来越快? 技术干货 1 ...
- 猖獗的假新闻：2017年1月1日起iOS的APP必须使用HTTPS
一.假新闻如此猖獗 刚才一位老同事 打电话问:我们公司还是用的HTTP,马上就到2017年了,提交AppStore会被拒绝,怎么办? 公司里已经有很多人问过这个问题,回答一下: HTTP还是可以正常提 ...
- [转载]Ubuntu17.04（Zesty Zapus）路线图发布：2017年4月13日发布
Canonical今天公布了Ubuntu 17.04(Zesty Zapus)操作系统的发布路线图,该版本于今年10月24日上线启动,toolchain已经上传且首个daily ISO镜像已经生成.面 ...
随机推荐
- Linux上网问题
开发板运行linux下和主机Windows互ping这块,就是Windows这边已经显示本地连接上了,从Windows ping Linux 可以通 但是在CRT 上ping Windows就没反应了 ...
- nth-child 和nth-type的区别
一.深呼吸,直接内容:nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用 ...
- 结巴（jieba）中文分词及其应用实践
中文文本分类不像英文文本分类一样只需要将单词一个个分开就可以了,中文文本分类需要将文字组成的词语分出来构成一个个向量.所以,需要分词. 这里使用网上流行的开源分词工具结巴分词(jieba),它可以有效 ...
- java IO之 File类+字节流 （输入输出 缓冲流 异常处理）
1. File类
- Samba远程代码执行漏洞(CVE-2017-7494)本地复现
一.复现环境搭建 搭建Debian和kali两个虚拟机: 攻击机:kali (192.168.217.162): 靶机:debian (192.168.217.150). 二.Debian安装并配置s ...
- Mysql连接出错问题
1.java 提示:java.lang.ClassNotFoundException: com.mysql.jdbc.Driver 处理:导入mysql-connector-java-5.1.7-bi ...
- 第四章：Django 模型 —— 设计系统表
1. Django框架提供了完善的模型(Model )层来创建和存储数据,每一个模型对应数据库中的唯一的一张表. 2. Django 模型基础知识: .每一本模型是一个Python类,继承了djang ...
- USB的四种传输类型与端点
1.事务 在介绍USB传输类型之前,请允许我先简答介绍一下USB事务. 事务一般由令牌包.数据包(可选).握手包组成. 令牌包:用来启动一个事务,总是由主机发送. 数据包:可以从主机到设备,也可以由设 ...
- 原生JSdom节点相关（非原创）
节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...
- Java中的数值和集合
数组array和集合的区别: (1) 数值是大小固定的,同一数组只能存放一样的数据. (2) java集合可以存放不固定的一组数据 (3) 若程序事不知道究竟需要多少对象,需要在空间不足时自动扩增容量 ...