排查苹果设备safari中无法播放视频的一些思路笔记
内容提要
今天早上博客的视频功能上线，发现视频不能在苹果设备的safari中播放。排查发现，safari要求以逐步缓冲的方式流式传输文件的部分内容，需要处理accept-ranges响应头。另外，CDN缓存和反代也可能导致问题。总结来说，safari对视频的处理方式有些奇葩。
延伸解读
Safari 的流式传输要求
Safari 要求视频以逐步缓冲的方式流式传输，并支持随机访问文件部分。这意味着服务器必须正确处理 HTTP 范围请求，返回 206 状态码和 Accept-Ranges 头。如果服务器一次性发送整个文件，Safari 将无法播放。这与 Chrome 不同，Chrome 即使接收整个文件也能播放，但也会发出范围请求以优化流媒体。
CDN 缓存带来的问题
使用 CDN 缓存时，CDN 可能忽略范围请求，直接返回整个文件，导致 Safari 无法播放。解决方法是不对 .mp4 文件进行缓存，但这会牺牲缓存带来的性能优势，尤其对于较大的视频文件。需要在缓存策略和兼容性之间权衡。
反向代理配置的影响
反向代理配置也可能影响视频播放。例如，使用 Nuxt3 进行反代时，即使看起来按范围切割了，Safari 仍可能不认。换成 nginx 反代可能解决问题。这表明不同的反代实现对于范围请求的处理方式可能存在差异，需要仔细测试。
对 Safari 行为的思考
Safari 对视频处理的严格性常被开发者诟病，甚至被称为“当代 IE”。对于博客中常见的小视频（几百 KB），Safari 仍要求范围请求，而图片文件却可以较大。这反映了 Safari 在媒体处理上的独特策略，开发者需要针对其特性进行适配。
Q&A
为什么视频在苹果设备的Safari中无法播放？
Safari要求以逐步缓冲的方式流式传输视频文件的部分内容，而不是一次性传送整个文件。如果服务器没有正确处理accept-ranges响应头，Safari就无法播放视频。
如何解决Safari中视频无法播放的问题？
需要处理accept-ranges响应头，支持HTTP范围请求。在Express中，可以添加中间件来解析Range头，并返回206 Partial Content响应，包含Content-Range等头信息。
CDN缓存如何影响Safari播放视频？
CDN缓存可能忽略Safari的范围请求，直接返回整个文件，导致Safari无法正确播放。建议不对.mp4资源文件进行缓存，但这会牺牲缓存带来的性能优势。
反向代理配置为什么会导致Safari无法播放视频？
反向代理可能没有正确处理范围请求，即使看起来按照range切割了，Safari也可能不认。使用nginx反代可能更有效，因为nginx对范围请求的支持更好。
Safari对视频流式传输有什么特殊要求？
Safari希望以逐步缓冲的方式流式传输文件的部分内容，并支持对文件任何部分的随机、临时访问。它要求服务器支持HTTP范围请求，以便在用户拖动进度条时只请求所需部分。
为什么Safari被认为在视频处理上很奇葩？
Safari对视频处理的方式与Chrome等浏览器不同，它严格要求范围请求，导致在CDN缓存和反向代理等常见配置下容易出现问题，给开发者带来额外的工作量，因此被戏称为当代IE。
