React Nextjs中Safari 16.2无法播放x265视频的原因咨询

核心原因：HEVC视频的Codec标签不兼容 #

Safari 16.x确实支持HEVC（x265）编码，但对视频文件的Codec Box格式有严格要求——它只识别hvc1类型的HEVC编码标签，而你的video_x265.mp4使用的是hev1标签（从FFmpeg输出里的Video: hevc (Main) (hev1 / 0x31766568)可以确认）。

hev1和hvc1都是HEVC的封装格式，但元数据存储方式有区别：

• hev1是原始HEVC封装，未将解码器必需的SPS/PPS参数嵌入Codec Box
• hvc1会把SPS/PPS参数写入Codec Box，这是Apple系浏览器强制要求的格式

关于你修复代码的补充说明 #

你用双source标签后能播放，本质是浏览器自动跳过了不兼容的video_x265.mp4，选择了兼容的x264版本。另外注意你的source标签里codecs参数写反了：

• 对应video_x265.mp4的应该是codecs=hvc1
• 对应video_x264.mp4的应该是codecs=avc1

正确的source写法应为：

<video
    className="object-cover w-full h-[60vh] sm:h-fit"
    autoPlay
    muted
    loop
    playsInline>
    <source
        src="/video_x265.mp4"
        type="video/mp4; codecs=hvc1"
    />
    <source
        src="/video_x264.mp4"
        type="video/mp4; codecs=avc1"
    />
</video>

让x265视频兼容Safari的方法 #

如果想直接让x265视频在Safari播放，重新用FFmpeg编码时需指定hvc1标签，命令示例：

ffmpeg -i input.mp4 -c:v libx265 -tag:v hvc1 -c:a aac output_x265_hvc1.mp4

该命令会强制将HEVC视频流的标签设为hvc1，让Safari能正确识别并解码。

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