上周遇到一个很奇怪的问题，safari里面的video加载总是报错，总结下。
测试页面的报错,有个亮点
其他小伙伴截图的报错
问题描述:
safari浏览器，无论桌面还是safari的模拟响应式模式，还是真机上(h5,hybird)，都会有几率的报这个错。不是每次都报错嗷，但是10次里面有5-6次不是加载不出来，就是要等30s+。
failed to load resource: the network connection was lost.
加载失败:网络连接已中断
排查思路:
- 因为我司的视频组件有经过一层包装的（ 类似这种），也有直接<video>使用的，所以最先怀疑的是前端的问题。就整了个demo页面去排查，然后发现是有几率的问题，就想整个组件统一处理
- 完成了视频组件封装，发现还是有这个问题...打开safari发现他会先发送一个 2b的请求，判断是你的视频是否支持分段加载
- 可以用
curl --range 0-99 视频地址 -o /dev/null来查看，如果返回的是这样，就是支持分段的~如果不是，需要进行服务器配置 ~
image.png
- 在支持分段请求加载后，发现还有问题，那就想着换一个视频地址试试
- 果然,换了视频源好了....然鹅，再多刷了几次后，发现还是有这个问题只是几率不太明显而已
- 那就想到是不是视频体积,编码问题呀,又一顿排查后，发现不是...不管是啥，只要safari肯定是有几率报错，10次至少2次！！！而且1-2mb的小视频就没事，超过3就不行了
- 然后就迷茫了...那换个其他厂家的视频url呗
- 奇迹出现，好了....至此就跟前端没啥关系了，接着找问题吧
- 换了url后，就联系七牛同事帮忙解决了
彻底找到原因:
- 因为我司的资源都是在七牛上的，所以找了七牛同事帮忙排查，
- 经过多次的排查，排除了 视频格式/编码等视频本身问题，排除了 cdn结点问题，最后找到了 缓存配置问题
- 七牛的同事反馈 “ 这个域名的缓存配置这边查看是 0 秒，这个会对访问效果有影响，每次都需要重复回源，而且，不缓存的话会对文件大小有限制”，所以
-
修改了七牛配置，缓存改成1个月后，问题得到解决。
解决以后的截图
总结
如果你也遇到safari里面的video加载请求 206 网络连接中断啥的，可以先curl看下 服务器支持分段加载不，因为safari要求必须要支持分段才行。如果可以分段，也是七牛CDN资源，看下缓存配置，视频资源是否回源了，七牛是有限制的。把七牛的缓存调整成1个月再试试~~
网友评论