关于Safari无法播放视频的问题研究

最近浏览官网时,突然发现在Safari中视频播放不了了,上线前是可以播放的,在Chrome中打开也是能播放的,这就很奇怪了。

问题分析

1. 查看请求

首先打开开发者工具,对比ChromeSafari的视频请求:

Chrome视频请求

Safari视频请求

通过比较ChromeSafari的请求我们发现,Chrome请求头中range字段的值是bytes=0-,而Safari请求头中range字段的值是bytes=0-1。从此得知,浏览器请求视频时是使用的范围请求Chrome是用一个HTTP请求请求了整个视频,即请求视频的第0个字节到最后一个字节Chrome不强制要求服务端支持范围请求,服务端响应200206Chrome都能支持。但是Safari要求服务端必须支持视频的范围请求Safari会先请求视频的第0个字节到第一个字节,来测试服务端是否支持范围请求,如果服务端支持范围请求,则响应状态码206,响应头中有正确的Content-Range字段,响应体是视频的第一个字节,此时,Safari才会继续请求视频的其他字节,否则Safari会放弃该视频的请求。从图中可以看到,我们视频的服务端不支持范围请求,响应的是整个视频,状态码200,所以导致无法在Safari播放。

2. ServiceWorker

刚才所说的视频服务端并不是指nginxCDN阿里云CDNnginx都是支持视频的范围请求的。这个不支持范围请求的服务端是ServiceWorker。因为我们官网采用了PWA技术,视频使用ServiceWorker缓存了,浏览器请求视频时,请求是由ServiceWorker在处理。这就是为什么上线前没有发现这个问题,因为上线前视频还没被缓存,测试不够充分,那时Safari是请求到CDN,可以正常请求到视频,如下图:

Safari正常请求

从图中可以看到,Safari将一个视频分成了多次范围请求,每次请求部分字节,只有当第一个0-1字节的测试请求被正确响应时,Safari才会发送其他范围请求

问题解决

问题已经定位清楚了,解决办法就是使ServiceWorker支持视频的范围请求
我们官网是采用的nextjs框架,PWA是通过next-offline这个插件实现的,next-offline封装的workbox-webpack-pluginworkbox-webpack-plguinworkbox库提供的一个webpack插件,workboxGoogle开发的一个功能强大的用于搭建PWA站点的库。workbox还提供了一个workbox.rangeRequests.Plugin插件来支持范围请求,所以我们只需要使用这个插件就可以了。
首先,workbox-webpack-plugin支持使用两种模式:GenerateSwInjectMainfest
GenerateSw模式是根据配置自动生成整个service-worker.js文件,它适用于简单的使用场景。
InjectMainfest模式是需要你自定义service-worker.js文件,然后由workbox-webpack-pluginwebpack打包生成的静态资源precache自动插入到你的service-worker.js文件中。
我们要使用workbox.rangeRequests.Plugin就需要使用InjectMainfest模式。
next-offline默认是使用workbox-webpack-pluginGenerateSw模式,所以需要在next.config.js中加入如下配置:

配置InjectMainfest模式

然后在service-worker.js中使用workbox.rangeRequests.Plugin
使用workbox.rangeRequests.Plugin

service-worker.js中,我们用到了两个缓存策略:

  • .mp4结尾的所有请求都用CacheFirst策略,并且在这个策略中使用了workbox.rangeRequests.Plugin以支持范围请求。
  • https开头的所有请求都用NetworkFirst策略。

匹配.mp4的策略必须写在匹配https策略之前,因为视频也能被https策略匹配到,其实这里可以将https匹配的正则改成以https开头但不以.mp4结尾:/^https?.*(?<!\.mp4)$/,但是Safari不支持否定逆序环视

还有需要注意的一点,如果我们对mp4使用CacheFirst策略,需要在servicer-worker.js install的时候将视频都添加到缓存。

其他一些限制参见官网文档:Serve cached audio and video

这样配置了之后,Safari也能播放ServiceWorker缓存的视频了:

ServiceWorker响应范围请求

Workbox调试技巧

Chrome的开发者工具很强大,在Application标签下可以看到Service WorkersCacheStorage。具体教程参见官网文档

但是Safari就不行了,很难调试。首先我们可以配置Workbox Debug模式:

Workbox Debug模式

这个配置必须写在所有引用Workbox的代码之前。配置好之后,Workbox会打印拦截请求的详情信息:

Workbox日志

可以清楚的看到哪个请求被命中,使用了什么缓存策略处理。

但是这个日志不是打印到控制台的。Safari需要在开发-服务工作线程-<你的站点域名>打开ServiceWorker网页检查器,才能看到Workbox日志:

打开ServiceWorker网页检查器

Safari也没给你控制ServiceWorker的调试工具,即使你修改了service-worker.js代码,也有可能浏览器还在用老的service-worker.js

你可以将以下代码复制粘贴到Safari控制台执行,然后重新打开浏览器以调试最新代码:

注销ServiceWorker

【完】

推荐阅读更多精彩内容