微信小程序：一则iOS下用video播放mp4文件问题排查

总共花了2个多小时，值得记录一下：

边学习边琢磨。

• 现象：

iOS下，用video组件播放mp4出现黑屏。mp4文件是用iOS拍摄上传的视频。

Andriod下，同样的代码，播放mp4则正常。

video组件代码如下：

<video  show-play-btn="{{true}}" controls show-casting-button="{{true}}" vslide-gesture-in-fullscreen="{{false}}" style="background-color: #eeeeee;width: 320px;height:240px;" src="{{'https://example?id=x'}}"  ></video>

文件src为一个URL请求，服务端为私有服务器处理请求。

• 排查

1、本身mp4文件是由iphone拍摄并且上传，下载本地后播放没有问题，说明本身mp4文件没问题。

2、查看微信小程序帮助文档，video组件中有binderror callback，加入该callback看看具体出错原因。

<video  省略...  binderror="videoErrorCallback"></video>

videoErrorCallback(e) {
    console.log('Video error info:')
    console.log(e.detail)
 },

用微信小程序”真机调试“，发现console上输出 errMsg为："MEDIA_ERR_NETWORK"

3、尝试修改src，直接下载mp4文件，如https://expamle/webapp/test.mp4，问题消失。

src的url为后台自己实现的servlet，而直接下载文件为tomcat（本例中用的tomcat服务器）默认webapp实现。

 

4、关键点是iOS下行为异常，安卓没问题，又加上是”MEDIA_ERR_NETWORK“错误。

怀疑http请求在iOS和andriod下不同。

用tcpdump在服务端抓包（centOS），下载下来用wireshark看一下http的请求和相应包。不知道iOS真机上有没有这样的抓包app，这样不用到服务器上折腾了。

比对2者行为发现：iOS下的http请求果然与andriod不同。继续google，发现的确如此。

没搞过视频不知道，还有这区别。

 

5、查验后台代码，发现服务端并没有根据该http请求进行不同处理。后台问题！

网上参考一个例子，验证了一下好使。

至此，原因查明，方案基本确定。

当然离代码提交真正解决还有一段距离。