macOS Safari下HTML5视频有声音无画面，常规方案排查未生效求助

我有一个视频在macOS Safari浏览器中仅播放声音但不显示画面，我已尝试下述解决方案均未生效：

• 我尝试过调整组合autoplay、muted、playsinline、loop等属性；
• 我尝试过将视频转码修改扩展名为.mov；
• 我尝试过切换两种资源引入方式：直接在<video>标签上设置src，或是在标签内部使用<source>标签指定资源；
• 我尝试过使用绝对路径和相对路径两种src设置方式，且网站为https协议；

该视频可在以下场景正常播放：

• 原始网站中；
• 其他所有桌面浏览器中；
• 单独在新标签页打开视频时；
• iOS Safari浏览器中；

Safari开发者工具控制台报错提示："An error appeared attempting to open the resource"。

当前用于展示视频的HTML代码如下：

<video controls muted playsinline loop preload="metadata">
 <source src="视频资源地址" type="video/mp4">
 <p>Your browser does not support HTML5 video.</p>
<video>

该视频为线上站点首页第一个视频。

1. 修正HTML语法错误 #

你当前使用的video标签未正确闭合，最后一行的<video>需要改为闭合标签</video>，语法错误会导致Safari解析标签属性异常。

2. 验证视频编码格式 #

macOS Safari对MP4视频的编码规范有严格要求，仅支持H.264编码（Baseline/Main/High profile 4.1及以下）+ AAC音频编码的MP4文件，不符合编码规范的视频会出现只有声音无画面的问题。
你可以通过ffmpeg工具验证编码：

ffprobe -v error -select_streams v:0 -show_entries stream=codec_name,profile,level -of default=noprint_wrappers=1:nokey=1 本地视频文件路径

如果编码不符合要求，可通过以下命令重新转码：

ffmpeg -i 输入视频路径 -c:v libx264 -profile:v high -level 4.1 -c:a aac -b:a 128k 输出视频路径.mp4

3. 检查服务器Range请求支持 #

Safari播放视频强制要求资源服务器支持字节范围请求，要求响应头包含Accept-Ranges: bytes，且收到Range请求时返回206状态码。你可以通过curl命令测试：

curl -I --range 0-100 你的视频资源地址

如果返回状态码不是206，需要调整服务器/CDN配置开启Range请求支持，Nginx、Apache等主流Web服务器默认已开启该功能，通常是CDN或反向代理层拦截了Range请求头导致。

4. 调整预加载策略 #

你当前使用的preload="metadata"在部分旧版macOS Safari中存在兼容性问题，可尝试将preload属性改为preload="auto"，或者临时移除preload属性测试。

5. 检查内容安全策略配置 #

如果你的站点配置了CSP（内容安全策略），需要确保media-src指令包含了视频资源的所属域名，否则Safari会拦截视频流加载仅保留音频输出。

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