IOS 视频播放黑屏问题解析

IOS 下浏览器播放本网站的视频会出现黑屏。假如在浏览器中直接访问视频文件的地址也出现黑屏,那么你就需要检查一下(通过 POSTMAN 等 HTTP 工具)后端有没有对 Range 请求头做出响应。

产生原因

IOS 下浏览器(Chrome,Safari)在请求视频流时,会默认在 HTTP 请求头中加入 Range 来向服务器请求对应的视频片段。参考这个在线视频链接,IOS 浏览器可以完美播放。使用 Fiddler 在 IOS 下抓包可以看到,在请求这个资源时(单单针对这个视频),手机发出了二次请求。

第一次请求

第一次请求时,请求头中带上了 Range:bytes=0-1,请求视频分片数据。

服务器返回 0-1 共2 字节的视频数据,HTTP 状态码为 206。

第二次请求

第二次请求时,请求头中带上了 Range:bytes=0-111061,请求视频分片数据。

服务器返回 0-111061 共 111062 字节的视频数据,HTTP 状态码为 206。

此时,浏览器开始播放视频数据。

补充

在所谓的第一次请求之前,浏览器还有一次请求。这个请求不带 Range 头。猜测是单单用于判断服务器是否支持 RANGE(通过 ACCEPT RANGES 头)。若支持,则根据上文提到的流程发送 RANGE 请求分片,并判断分片大小是否合法,只有合法的响应才能通过并播放。若不支持,也不予播放。

参考链接

HTML5 VIDEO bytes on iOS

发表评论

电子邮件地址不会被公开。 必填项已用*标注