React Native中FFmpegKit转码HEVC视频仅音频无画面问题及跨平台1080p视频转码方案咨询

问题背景 #

我在开发React Native应用时，需要将用户上传的视频转码成iOS和Android双平台都能原生播放的格式。目前选择在设备本地完成转码（不想在用户基数稳定前承担云转码的API成本），但我的FFmpeg知识比较零散，遇到了一个棘手的问题：

下面的转码命令生成的视频只有音频能正常播放，视频画面完全无法显示，但换成H264编码（h264_videotoolbox和h264_omx）就能正常工作。我本来想用HEVC来大幅减小文件体积，所以想请教问题原因，以及更合适的跨平台1080p视频转码命令：

if (Platform.OS === 'ios') {
  await FFmpegKit.execute(`-i ${path} -c:v hevc_videotoolbox -c:a aac -movflags +faststart -y ${outputPath}`);
} else {
  await FFmpegKit.execute(`-i ${path} -c:v hevc_omx -c:a aac -movflags +faststart -y ${outputPath}`);
}

问题原因与解决方法 #

经过排查我终于找到了解决方案：必须添加-tag:v hvc1参数，Apple的原生播放器才能正确识别HEVC内容。

HEVC编码在MP4容器中有两种常见的格式标识：hev1和hvc1。其中hev1是原始的HEVC编码标签，但Apple生态的播放器对它的兼容性很差；而hvc1是适配Apple平台的标准化标签，添加这个参数后，iOS的播放器就能正常解析视频流了。

修正后的命令如下：

if (Platform.OS === 'ios') {
  await FFmpegKit.execute(`-i ${path} -c:v hevc_videotoolbox -tag:v hvc1 -c:a aac -movflags +faststart -y ${outputPath}`);
} else {
  await FFmpegKit.execute(`-i ${path} -c:v hevc_omx -c:a aac -movflags +faststart -y ${outputPath}`);
}

（Android平台不需要额外标签，因为Android的HEVC解码对标签兼容性更好）

推荐的跨平台1080p HEVC转码命令 #

针对1080p视频，为了兼顾兼容性、文件体积和转码效率，推荐以下优化后的命令：

iOS平台

-i ${path} -c:v hevc_videotoolbox -tag:v hvc1 -crf 28 -preset medium -c:a aac -b:a 128k -movflags +faststart -y ${outputPath}

• -crf 28：控制视频质量（值越小质量越高，28是兼顾画质和体积的平衡值）
• -preset medium：平衡转码速度与压缩效率
• -b:a 128k：固定音频比特率，在保证音频清晰度的同时控制体积

Android平台

-i ${path} -c:v hevc_omx -crf 28 -preset medium -c:a aac -b:a 128k -movflags +faststart -y ${outputPath}

• 同样用crf和preset参数平衡质量与体积，Android硬件编码器对这些参数的支持度良好

如果后续遇到部分老旧Android设备不支持HEVC的情况，可以考虑 fallback 到兼容性更广的H264编码，命令如下：

if (Platform.OS === 'ios') {
  await FFmpegKit.execute(`-i ${path} -c:v h264_videotoolbox -crf 23 -preset medium -c:a aac -b:a 128k -movflags +faststart -y ${outputPath}`);
} else {
  await FFmpegKit.execute(`-i ${path} -c:v h264_omx -crf 23 -preset medium -c:a aac -b:a 128k -movflags +faststart -y ${outputPath}`);
}

备注：内容来源于stack exchange，提问作者Martin Calvert