Next.js应用仅Safari无法加载视频、清空缓存后短暂生效该如何修复？

根因说明 #

你遇到的问题由两个核心原因导致：一是Safari对webm格式的兼容性支持不足，且自动播放逻辑要求额外属性；二是Safari对视频范围请求的缓存处理逻辑和Chrome不同，缓存校验失败会直接终止加载，也就是你清空缓存后正常、后续又失效的原因。

具体修复步骤 #

• 补全视频标签属性与兼容源
  Safari默认优先支持H.264编码的mp4格式，且自动播放必须添加playsInline属性，同时调整源的优先级，把mp4放在webm之前，修改后的代码如下：

  <>
    <Wrap background={background}>
      <StyledVideo 
        autoPlay 
        muted 
        loop
        playsInline
        preload="metadata"
      >
        <source src={videoProps.mp4Src} type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
        <source src={videoProps.webmSrc} type='video/webm; codecs="vp9, opus"' />
        您的浏览器不支持视频播放
      </StyledVideo>
    </Wrap>
  </>
  

• 配置正确的视频资源响应头
  如果你把视频存放在Next.js的public目录下，在next.config.js中添加视频资源的专属响应头，适配Safari的范围请求规则：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    async headers() {
      return [
        {
          source: '/videos/:path*',
          headers: [
            { key: 'Accept-Ranges', value: 'bytes' },
            { key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }
          ]
        }
      ]
    }
  }
  
  module.exports = nextConfig
  

  如果你用第三方CDN托管视频，确认CDN开启了范围请求支持，响应视频资源时正常返回206状态码，不要启用强制缓存重新校验的规则。
• 增加错误定位逻辑
  如果修复后仍偶现问题，可以给video标签添加错误回调，排查具体报错原因：

  <StyledVideo
    // 其他属性保持不变
    onError={(e) => console.log('视频加载错误详情:', e.currentTarget.error)}
  />
  

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