React Native Video 在 Android 平台上的视频宽高比异常问题解析

问题现象

在 React Native Video 6.6.1 及以上版本中，Android 平台出现了一个关于视频宽高比的显示问题。当视频设置为循环播放（repeat=true）时，每次视频重新开始播放时，视频的宽高比会发生变化，导致画面显示异常。这个问题在竖屏视频（如 1080x1920 分辨率）上尤为明显。

问题根源分析

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

1. ExoPlayer 底层问题：Android 的 ExoPlayer 在处理某些视频流时，无法正确识别和保持视频的原始宽高比信息，特别是在视频循环播放时。

2. React Native Video 实现问题：在 ExoPlayerView.java 文件中，处理视频旋转角度（90° 或 270°）时缺少 break 语句，导致宽高比计算逻辑错误地继续执行默认分支。

3. 视频源问题：部分视频流的元数据（如 m3u8 文件）中声明的分辨率与实际视频分辨率不符（例如声明为 1920x1080 但实际是 1080x1920），加剧了宽高比计算错误。

技术解决方案

针对这个问题，社区已经提出了有效的修复方案：

1. 代码修复：在 ExoPlayerView.java 中，为旋转角度处理逻辑添加 break 语句，防止宽高比计算逻辑错误地继续执行。

2. 视频源优化：确保视频流的元数据与实际分辨率一致，特别是对于竖屏视频，应正确声明其分辨率（如 1080x1920 而非 1920x1080）。

3. 临时解决方案：如果无法立即更新视频源，可以暂时注释掉 ExoPlayerView.java 中相关的宽高比计算代码，但这并非长久之计。

最佳实践建议

1. 版本升级：建议使用 React Native Video 的最新稳定版本（当前为 6.6.2 及以上），其中包含了相关修复。

2. 视频预处理：在上传视频前，确保视频元数据中的分辨率信息与实际分辨率一致，特别是对于竖屏视频。

3. 测试验证：在开发过程中，应对不同分辨率和方向的视频进行充分测试，确保在各种情况下都能正确保持宽高比。

4. 错误处理：在代码中添加对视频加载错误的处理逻辑，以便及时发现和解决类似问题。

总结

视频播放是移动应用中的常见需求，正确处理视频宽高比对于用户体验至关重要。React Native Video 库的这个 Android 平台问题展示了跨平台开发中可能遇到的底层兼容性问题。通过理解问题根源、应用官方修复方案，并遵循最佳实践，开发者可以确保视频播放功能的稳定性和一致性。