Safari浏览器H5视频无法播放主要因格式、响应头、自动播放策略等问题。需使用MP4格式并确保H.264+AAC编码，避免WebM/OGG；服务器须支持Accept-Ranges: bytes，返回206状态码及正确Content-Type；Nginx配置应添加相关响应头；自动播放需加muted属性，有声播放由用户点击触发；跨域需设置Access-Control-Allow-Origin，避免路径错误或file://协议问题。
在开发或浏览网页时，遇到Safari浏览器H5视频无法播放的问题很常见。这通常不是单一原因导致的，而是涉及格式、响应头、自动播放策略等多个方面。想要快速解决，需要从服务器配置到前端代码逐一排查。
检查视频格式与编码是否兼容
Safari对视频格式有明确要求，不支持所有常见的H5视频编码。如果格式不对，即使代码正确也无法播放。
- 优先使用MP4格式，并确保视频采用H.264视频编码和AAC音频编码
- 避免使用WebM或OGG等Safari不支持的格式作为主资源
- 可使用ffmpeg进行转码：ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -movflags +faststart output.mp4
- 添加
type="video/mp4"属性帮助浏览器识别
确保服务器返回正确的HTTP响应头
iOS Safari在加载视频时会发送分段请求（Range Requests），如果服务器不支持或响应头缺失，就会出现“尝试载入资源时发生错误”。
- 必须包含
Accept-Ranges: bytes，表明支持字节范围请求 - 首次请求返回状态码200，后续分段请求应返回206 Partial Content
- 设置正确的
Content-Type: video/mp4 - 建议加上
Last-Modified和ETag以便缓存控制 - Nginx配置示例：
location /videos/ {
add_header Accept-Ranges bytes;
add_header Cache-Control public;
add_header Last-Modified $date_gmt;
etag on;
expires 1y;
}
处理自动播放限制与用户交互
Safari出于用户体验考虑，默认禁止静音外的自动播放，且部分操作需用户主动触发。
- 如需自动播放，必须加上
muted属性： - 若要播放有声视频，必须由用户点击事件触发play()方法
- 避免在页面加载后立即调用play()，应绑定在按钮点击或其他手势事件上
- 注意某些情况下（如微信公众号内嵌页）可能有额外限制
排查跨域与资源路径问题
视频资源如果位于不同域名下，缺少CORS配置也会导致加载失败。
- 确认视频地址没有拼写错误或404情况
- 跨域资源需服务端设置
Access-Control-Allow-Origin头部 - 本地测试时注意file://协议限制，建议使用本地服务器预览
- 可通过浏览器开发者工具的Network面板查看请求状态和响应头
