使用FFmpeg-Kit-React-Native生成的MP4无法在浏览器播放

核心问题分析 #

你生成的MP4无法在Chrome/Firefox/Safari播放，大概率是因为视频编码、封装格式或元数据不符合浏览器兼容标准，结合你提供的命令，主要问题点包括：

• 未添加图片循环参数-loop 1，导致视频时长为0（单图生成视频必须让图片循环）
• 未强制使用浏览器兼容的H.264编码基线/主 profile
• 未将MOOV原子（视频元数据）移到文件头部（浏览器流式加载需要）
• 部分命令未明确指定兼容的像素格式yuv420p

修正后的FFmpeg命令 #

结合你的需求（单图+音频生成固定分辨率MP4），使用以下命令即可解决浏览器兼容问题，同时适配Android默认FFmpeg-Kit包（无需额外安装full-gpl等包）：

-loop 1 -i ${imageFile} -i ${audioFile?.uri} -vf "scale=480:360:force_original_aspect_ratio=decrease,pad=480:360:-1:-1" -c:v libx264 -profile:v baseline -level 3.0 -pix_fmt yuv420p -c:a aac -b:a 128k -shortest -movflags +faststart ${outputFile}

参数说明： #

• -loop 1：让单张图片循环播放，确保视频时长和音频一致
• -vf "scale=...pad=..."：保持原比例缩放并补黑边到480x360
• -c:v libx264 -profile:v baseline -level 3.0：强制使用浏览器全兼容的H.264基线编码（默认包自带支持）
• -pix_fmt yuv420p：指定所有浏览器都支持的像素格式
• -c:a aac -b:a 128k：转码音频为AAC（浏览器通用音频编码），避免原音频编码不兼容
• -shortest：让视频时长和较短的输入（音频）保持一致
• -movflags +faststart：将MOOV原子移到文件头部，支持浏览器流式加载

Android无法安装full-gpl等包的排查方向 #

如果无法安装这些扩展包，试试以下操作：

1. 检查build.gradle中是否正确配置了FFmpeg-Kit的依赖，比如：

   dependencies {
     implementation 'com.arthenica:ffmpeg-kit-react-native:5.1.0' // 替换为你使用的版本
     // 若需特定包，比如full-gpl：
     // implementation 'com.arthenica:ffmpeg-kit-full-gpl:5.1.0'
   }
   

2. 确认Android SDK、NDK版本与FFmpeg-Kit版本兼容（参考官方版本适配规则）
3. 清除gradle缓存后重新构建：执行./gradlew clean build
4. 检查网络是否能正常访问Maven仓库，必要时配置镜像源

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