H.264(avc1.640029)视频流无法在Safari播放求助

资源信息 #

• 简化测试代码：

<video id="video" controls autoplay muted>
    <source
       type="application/x-mpegURL"
       src="https://stream.huskyking.com/stream/43d1bf49-1769-41f0-ac51-88e6f35d5fc9/index.m3u8"
    >
</video>

• 视频流地址：https://stream.huskyking.com/stream/43d1bf49-1769-41f0-ac51-88e6f35d5fc9/index.m3u8

问题描述 #

该m3u8视频流在Android、Windows平台的Chrome浏览器中可正常播放，但在iPhone和Mac的Safari浏览器中播放失败，抛出错误：ERROR (CODE:3 MEDIA_ERR_DECODE)

复现步骤 #

• 在iPhone或Mac的Safari浏览器中打开包含上述video标签的页面
• 视频无法加载播放，触发解码错误

受影响范围 #

• 浏览器：所有版本的Safari
• 系统：iOS（iPhone）、macOS

预期结果 #

视频流可在Safari中正常加载并播放

排查与解决方案 #

1. 检查视频编码兼容性
   Safari对H.264编码有严格要求，需确保视频使用Baseline或Main Profile，Level在3.0及以上。可通过ffmpeg命令查看编码信息：

ffmpeg -i https://stream.huskyking.com/stream/43d1bf49-1769-41f0-ac51-88e6f35d5fc9/index.m3u8

若编码为High Profile或Level过低，需重新转码适配Safari。

2. 验证TS切片参数一致性
   m3u8流中所有TS切片的编码参数（分辨率、帧率、码率、编码格式）必须统一，参数不一致会导致Safari解码失败。可下载多个切片文件，用ffmpeg逐一核对参数。

3. 修正HTTP响应头与CORS设置

• 服务器返回的m3u8文件需设置正确的MIME类型：application/vnd.apple.mpegurl（Safari推荐类型，优于application/x-mpegURL），TS切片需设置为video/MP2T。
• 确认服务器配置了正确的CORS策略，允许页面所在域名跨域请求视频资源，否则Safari会阻止加载。

4. 使用HLS.js兼容层
   若上述调整无效，可引入HLS.js库提升兼容性，代码示例：

<video id="video" controls autoplay muted></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  const video = document.getElementById('video');
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource('https://stream.huskyking.com/stream/43d1bf49-1769-41f0-ac51-88e6f35d5fc9/index.m3u8');
    hls.attachMedia(video);
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'https://stream.huskyking.com/stream/43d1bf49-1769-41f0-ac51-88e6f35d5fc9/index.m3u8';
  }
</script>

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