微信h5 ios无法播放视频问题排查经过

业务场景及问题:小程序内嵌的h5页面,h5页面中的视频在浏览器、安卓手机都可以正常播放,ios不行
猜想原因:视频编码问题
代码逻辑处理步骤:视频上传到微软服务,会返回一个视频地址,但是客户要求不直接使用返回的视频地址播放,还要出一个新接口获取视频流,即接口:/stronger/view?(作用:使用微软返回的视频地址边下载边传给前端)
排查:

步骤一:猜想是视频编码问题,首先确认上传的视频本身编码有没有问题,找客户拿token获取到微软服务返回的视频地址,改地址直接在ios的微信聊天窗口打开就可播放。(说明视频源即视频本身没问题,问题只能出现在接口/stronger/view这一步)
步骤二:猜想问题出现在接口/stronger/view这步,但是怎么定位呢,因为接口是直接放在video标签上的,前端没做任何操作,在h5页面开启vconsole,发现有报错提示如下图


image.png

找不到原因:前端经理开始抓包操作,发现ios上加载视频和浏览器加载视频接口/stronger/view的参数有些差异,但是在ios和浏览器上查看的差异不能解决问题


3e86598ed323bc255f29f68d38074ef.png

94f96baa3d27d5d3d31b4f4b31dbf21.png

又想到自己的test环境ios上视频是可以播放的,那就对比test环境和staging环境有什么差异,
f2a5718d32912cd87b0d7fd80f530c6.png

24f644c1366bdb3b3d92e1e4b38b247.png

最终在这次对比中到了答案,方向没错问题出现在/stronger/view接口上,从微软边下边传的时候把视频格式做了转码导致ios不支持

注意:安卓上可以播放视频,ios不能播放视频,基本只有“视频编码格式不对”这个一个原因

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。