Safari无法播放H5视频解决方法

先检查视频编码与服务器响应头配置。iOS Safari要求H.264 Baseline Profile编码、AAC音频及MP4封装，使用FFmpeg转码并添加faststart；服务器需支持Range请求，返回Accept-Ranges: bytes和Content-Type: video/mp4，Nginx正确配置路径与头部；前端去除autoplay或配合muted，绑定用户点击事件触发play()，确保controls存在且无CORS限制，逐步排查可解决大部分问题。

在iOS的Safari浏览器里遇到H5视频无法播放的问题很常见，主要原因集中在视频编码、服务器响应头配置和前端代码设置三方面。直接在手机上调试困难，建议先从服务端和视频文件本身入手排查。

检查视频编码格式是否兼容

iOS Safari对H.264编码的某些高级配置支持有限，特别是用高配置文件（High Profile）编码的MP4视频容易出现“NotSupportedError”错误。虽然MP4是通用格式，但编码参数不匹配依然会失败。

• 使用FFmpeg工具将视频转码为兼容性更强的基线配置文件（Baseline Profile）
• 推荐转码命令：
  ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -movflags +faststart output.mp4
• 转换后确保音频为AAC编码，封装格式为MP4，这样在绝大多数iOS设备上都能正常播放

确保服务器返回正确的响应头

苹果设备在加载视频时会发送分段请求（Range Requests），如果服务器未正确响应，video标签将无法加载内容，常表现为黑屏或提示“无法播放”。

• 关键响应头必须包含：Accept-Ranges: bytes 和 Content-Type: video/mp4
• 首次请求应返回200状态码，后续分片请求返回206 Partial Content
• 使用Nginx时，配置示例：

  location /videos/ {
      add_header Accept-Ranges bytes;
      add_header Cache-Control public;
      add_header Content-Type video/mp4;
      alias /path/to/videos/;
  }

前端代码与用户交互注意事项

Safari出于流量和用户体验考虑，对自动播放有严格限制，且依赖用户手势触发。

• 去除autoplay属性，或配合muted实现静音自动播放
• 确保video标签包含controls，让用户能主动点击播放
• 通过JavaScript调用play()前，最好绑定在用户点击事件内，例如：

  document.getElementById('playBtn').addEventListener('click', function() {
      document.getElementById('myVideo').play();
  });

• 检查是否有CORS问题，跨域视频需服务端开启相应权限