前言

今天投产了一个小项目，一个很简单的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

过程

以下是问题解决思路

  1. 同样的视频文件，在该大企业的网站内时，安卓机是可以正常播放的。
  2. 而视频文件到了cdn服务器里，安卓机提示不能解析。
  3. 使用chrome浏览器的network对比两边请求头(Request Header)和响应头(Response Header)
  4. 发现从cdn服务器请求到的mp4视频比大企业的网站内请求到的mp4视频的请求头多了一行"Accept-Encoding:gzip, deflate, sdch"
  5. 发现从cdn服务器请求到的mp4视频比大企业的网站内请求到的mp4视频的响应头多了一行"Content-Encoding: gzip"
  6. 进行有针对性的进行搜索

经过查询发现：

  • 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>

使用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视频的问题的更多相关文章

  1. 微信内置浏览器http请求10秒内接收不到数据会自动重发第二遍请求

    微信内置浏览器http请求10秒内接收不到数据会自动重发第二遍请求     这是个坑

  2. 【2017年9月10日更新】ABP配套代码生成器(ABP Code Generator)帮助文档，实现快速开发

    ABP代码生成器介绍 ABP Code Generator 针对abp这个框架做了一个代码生成器,功能强大.分为两大功能点,一个是数据层,一个是视图层. 数据服务层:通过它,可以实现表设计.领域层初始 ...

  3. JQuery基本知识、选择器、事件、DOM操作、动画--2017年2月10日

    $(对象)可以将JS对象转换为JQuery对象  .get(0)可以将JQuery对象转换为JS对象 并无太大区别,灵活点出即可

  4. [转]微信JSAPI 微信内置JSAPI 2015年1月官方正式API接口，分享完整实例

    FROM : http://www.oschina.net/code/snippet_2276613_45290 HTML通过微信,分享朋友圈出发此JSAPI <?php require_onc ...

  5. 免费公共DNS服务器IP地址大全（2017年6月24日）

    收集全球各个常用公共DNS服务器 IP地址,欢迎各位朋友评论补充! 国内常用公共DNS 114 DNS: (114.114.114.114:    114.114.115.115) 114DNS安全版 ...

  6. plsql developer 10注册码----亲测截止2017年5月6可用

    亲测截止2017年5月6可用 Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769password:xs374ca

  7. 导航狗IT周报-2018年05月27日

    原文链接:https://www.daohanggou.cn/2018/05/27/it-weekly-9/ 摘要: “灰袍技能圈子”将闭圈:物理安全:为什么我们现在的生活节奏越来越快? 技术干货 1 ...

  8. 猖獗的假新闻：2017年1月1日起iOS的APP必须使用HTTPS

    一.假新闻如此猖獗 刚才一位老同事 打电话问:我们公司还是用的HTTP,马上就到2017年了,提交AppStore会被拒绝,怎么办? 公司里已经有很多人问过这个问题,回答一下: HTTP还是可以正常提 ...

  9. [转载]Ubuntu17.04（Zesty Zapus）路线图发布：2017年4月13日发布

    Canonical今天公布了Ubuntu 17.04(Zesty Zapus)操作系统的发布路线图,该版本于今年10月24日上线启动,toolchain已经上传且首个daily ISO镜像已经生成.面 ...

随机推荐

  1. PHP容器--Pimple运行流程浅析

    需要具备的知识点 闭包 闭包和匿名函数在PHP5.3.0中引入的. 闭包是指:创建时封装周围状态的函数.即使闭包所处的环境不存在了,闭包中封装的状态依然存在. 理论上,闭包和匿名函数是不同的概念.但是 ...

  2. 1.如何安装ubuntu

    1.先安装vmvare workstation  VMware Workstation 12序列号: 5A02H-AU243-TZJ49-GTC7K-3C61N 2.下载ubuntu镜像 3.安装

  3. JAVA基础——编程练习（二）

    JAVA编程练习(二) 今天我为了巩固之前的java基础知识的学习,再次进行实战演习,编写了一个小小的java控制台程序,主要是运用java面向对象的思想来完成这个小项目. 一.项目背景介绍 根据所学 ...

  4. js 实现图片压缩并转换成base64(data:image/jpeg;base64)格式

    <!DOCTYPE html> <html> <head> <!--by 0o晓月メ http://www.cnblogs.com/final-elysion ...

  5. SQL Server 文件结构 与 全局变量,函数

    SQL Server 文件结构与全局变量 数据库和表 文件类型 主数据文件 .mdf 次要数据文件 .ndf 日志文件 .ldf 系统数据库 master 数据库 记录所有的登陆账户和系统配置设置 记 ...

  6. Unity 游戏框架搭建 (一) 概述

      为了重构手头的一款项目,翻出来当时未接触Unity时候收藏的视频<Unity项目架构设计与开发管理>,对于我这种初学者来说全是干货.简单的总结了一下,以后慢慢提炼. 关于Unity的架 ...

  7. ReactiveCocoa源码解析(五) SignalProtocol的observe()、Map、Filter延展实现

    上篇博客我们对Signal的基本实现以及Signal的面向协议扩展进行了介绍, 详细内容请移步于<Signal中的静态属性静态方法以及面向协议扩展>.并且聊了Signal的所有的g功能扩展 ...

  8. Vijos 1981 跳石头 二分

    描述 一年一度的"跳石头"比赛又要开始了! 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 N 块岩 ...

  9. cocos 射线检测 3D物体 (Sprite3D点击)

    看了很多朋友问怎么用一个3D物体做一个按钮,而且网上好像还真比较难找到答案, 今天翻了一下cocos源码发现Ray 已经封装了intersects函数,那么剩下的工作其实很简单了, 从屏幕的一个poi ...

  10. vue vuex 提交 this.$store.commit({type: 'setSelectPro', selectPro: this.productId});

    1.store.commit({'type':'mutation','parameter':'value'}); store.dispatch('action'); 2.获取state保存的值 sto ...