React Native Video 组件在 Android 平台上的宽高比异常问题分析

问题现象

在使用 React Native Video 组件（版本 6.6.1及以上）时，Android 平台上出现了一个特殊的显示异常：当视频设置为循环播放（repeat=true）时，视频在每次循环后会出现宽高比变化的问题。具体表现为视频画面突然被拉伸或压缩，破坏了原有的比例。

问题根源

经过深入分析，这个问题涉及多个层面的因素：

1. ExoPlayer 底层问题：Android 使用的 ExoPlayer 在处理某些视频流时，会不一致地报告视频的宽高信息。特别是对于非常规分辨率的视频（如竖屏的1080x1920视频被标记为1920x1080），ExoPlayer 在循环播放时可能会错误计算宽高比。

2. 组件实现缺陷：React Native Video 的 Android 实现在处理视频旋转角度（90°或270°）时存在逻辑不完善，缺少必要的 break 语句，导致宽高比计算逻辑被错误执行。

3. 视频源问题：部分视频源的元数据（如HLS流中的分辨率标记）与实际视频内容不符，加剧了宽高比计算错误的发生。

技术细节

问题的核心在于 ExoPlayerView.java 文件中的宽高比计算逻辑。当视频带有旋转信息时（常见于手机拍摄的竖屏视频），组件会根据旋转角度调整宽高比计算方式：

switch (rotationDegrees) {
    case 90:
    case 270:
        layout.setVideoAspectRatio(format.width == 0 ? 1 : (format.height * format.pixelWidthHeightRatio) / format.width);
        // 缺少break语句导致逻辑继续执行
    default:
        layout.setVideoAspectRatio(format.height == 0 ? 1 : (format.width * format.pixelWidthHeightRatio) / format.height);
}

这个实现存在两个问题：

1. 缺少 break 语句导致默认情况的计算会覆盖特殊情况的结果
2. 没有充分考虑视频源元数据可能不准确的情况

解决方案

对于开发者而言，可以采取以下措施：

1. 临时解决方案：

   • 修改 node_modules 中的 ExoPlayerView.java 文件，添加缺失的 break 语句
   • 对于可控的视频源，确保视频元数据与实际内容一致

2. 长期建议：

   • 关注 React Native Video 的官方更新，等待包含完整修复的新版本发布
   • 对于关键业务场景，考虑实现自定义的视频播放组件，增加对宽高比的额外校验逻辑

3. 最佳实践：

   • 在上传视频前，使用专业工具检查和修正视频元数据
   • 在应用中增加对视频宽高比的监控和异常处理逻辑
   • 对于用户生成内容(UGC)，考虑在服务端对视频进行转码和标准化处理

总结

这个问题展示了跨平台开发中常见的底层兼容性挑战。React Native Video 作为桥梁层，需要妥善处理原生播放器的各种边界情况。开发者在使用时应当：

1. 充分测试不同来源的视频内容
2. 关注组件更新日志
3. 对于专业级视频应用，考虑实现更精细的控制逻辑

通过理解问题的多层面原因，开发者可以更好地规避类似问题，构建更稳定的视频播放体验。