React+Next.js项目iPhone端视频自动播放失效问题解决

针对你在React+Next.js项目中遇到的视频安卓正常播放、iPhone端失效的问题，结合Safari的播放规则，给出以下解决步骤：

1. 修正Video标签属性 #

iPhone Safari对自动播放有严格限制，必须满足静音+内联播放条件，同时属性写法要符合JSX规范：

• 添加playsinline属性：这是让iPhone允许视频在页面内播放、而非强制全屏的核心配置。
• 修正autoplay写法：JSX中布尔属性直接写autoplay即可，无需赋值为空字符串。
• 移除OGG格式的source：iPhone不支持OGG视频，保留只会无效甚至干扰加载逻辑。

修正后的代码示例：

<video loop autoplay muted playsinline>
  <source src="https://xxxxxxxxxxxx.vercel.app/img/video.mp4" type="video/mp4" />
  Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

2. 检查视频文件编码与结构 #

如果修正标签后仍无法播放，大概率是视频文件本身的问题：

• 确保MP4采用H.264编码（Baseline或Main profile），这是iPhone原生支持的编码格式。
• 调整视频的moov原子位置：Safari要求视频的moov元数据放在文件开头，才能实现流式加载。可以用ffmpeg工具处理：

  ffmpeg -i 原视频文件.mp4 -movflags +faststart 处理后的视频文件.mp4
  

  替换处理后的视频到原链接即可。

3. 额外排查点 #

• 确认视频链接的CORS配置：如果视频托管在第三方服务器，需确保服务器允许你的网站域名跨域访问资源。
• 测试网络环境：iPhone在蜂窝网络下可能限制自动播放，建议先在WiFi环境下测试，或检查系统设置是否关闭了蜂窝网络的视频自动播放权限。

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