如何解决Safari中从Directus加载.webm视频失败问题（本地可播放）

• 检查Directus返回的MIME类型
  Safari对视频的MIME类型校验非常严格，如果Directus返回的Content-Type不是video/webm（比如返回application/octet-stream），Safari会拒绝识别视频。打开浏览器开发者工具的Network面板，找到视频请求，查看Response Headers里的Content-Type字段。如果类型不正确，需要在Directus中配置webm对应的MIME映射，确保系统能正确识别该格式。

• 排查CORS跨域配置
  Safari的CORS规则比Chrome/Firefox更严格，视频播放依赖分段加载（Range请求），需要Directus的CORS配置满足：

  • 允许你的应用域名在Access-Control-Allow-Origin中
  • Access-Control-Allow-Methods包含GET和HEAD
  • Access-Control-Expose-Headers包含Content-Range、Accept-Ranges等分段相关的头
    检查Network面板是否有CORS相关的错误，或者响应头是否包含上述字段。

• 验证视频编码与Directus的转码设置
  Safari仅支持VP8/VP9编码的webm视频，虽然本地能播放说明编码本身兼容，但要确认Directus是否对视频做了转码或压缩处理。用ffmpeg分别检查本地视频和Directus返回的视频编码信息：

  ffmpeg -i local-video.webm
  ffmpeg -i <(curl -L https://directusaddress.com/assets/fileUID)
  

  对比两个输出的Codec信息，如果不一致，需要调整Directus的文件处理设置，关闭不必要的转码选项。

• 检查Directus的资产响应头与权限
  Safari需要视频请求返回Accept-Ranges: bytes头来支持分段播放，同时如果视频需要权限验证，要确保Directus的响应不会出现异常跳转（如302）导致视频加载失败。在Network面板中查看视频请求的状态码和响应头，确认Accept-Ranges字段存在且值为bytes。

• 排除Safari自动播放策略干扰
  虽然代码已经加了muted和autoplay，但Safari的自动播放可能受页面交互状态影响。可以临时添加一个播放按钮，手动调用document.querySelector('.viewerVideo').play()，测试是否能正常播放，以此排除自动播放限制的问题。

内容的提问来源于stack exchange，提问作者Posoroko