业务场景及问题:小程序内嵌的h5页面,h5页面中的视频在浏览器、安卓手机都可以正常播放,ios不行
猜想原因:视频编码问题
代码逻辑处理步骤:视频上传到微软服务,会返回一个视频地址,但是客户要求不直接使用返回的视频地址播放,还要出一个新接口获取视频流,即接口:/stronger/view?(作用:使用微软返回的视频地址边下载边传给前端)
排查:
步骤一:猜想是视频编码问题,首先确认上传的视频本身编码有没有问题,找客户拿token获取到微软服务返回的视频地址,改地址直接在ios的微信聊天窗口打开就可播放。(说明视频源即视频本身没问题,问题只能出现在接口/stronger/view这一步)
步骤二:猜想问题出现在接口/stronger/view这步,但是怎么定位呢,因为接口是直接放在video标签上的,前端没做任何操作,在h5页面开启vconsole,发现有报错提示如下图
找不到原因:前端经理开始抓包操作,发现ios上加载视频和浏览器加载视频接口/stronger/view的参数有些差异,但是在ios和浏览器上查看的差异不能解决问题
又想到自己的test环境ios上视频是可以播放的,那就对比test环境和staging环境有什么差异,
最终在这次对比中到了答案,方向没错问题出现在/stronger/view接口上,从微软边下边传的时候把视频格式做了转码导致ios不支持
注意:安卓上可以播放视频,ios不能播放视频,基本只有“视频编码格式不对”这个一个原因