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

问题现象

在 React Native Video 库（版本 6.6.1 及以上）中，当视频设置为循环播放（repeat=true）时，Android 平台上会出现视频宽高比异常的问题。具体表现为视频在首次播放时显示正常，但在循环播放后宽高比发生变化，导致视频内容被拉伸或压缩。

问题根源

经过深入分析，这个问题主要由以下几个因素共同导致：

1. ExoPlayer 底层问题：Android 底层媒体框架 ExoPlayer 在处理某些视频流时，未能正确报告视频的宽高比信息。特别是在视频循环播放时，ExoPlayer 会重新触发宽高比计算，但返回的数据不一致。

2. 视频流元数据问题：部分视频流（特别是竖屏视频）的元数据中可能包含错误的宽高比信息。例如，一个实际分辨率为 1080x1920 的竖屏视频，其元数据可能错误地标记为 1920x1080。

3. React Native Video 实现问题：库中的宽高比计算逻辑存在缺陷，特别是在处理视频旋转角度时缺少必要的 break 语句，导致计算逻辑错误。

技术细节

在 ExoPlayerView.java 文件中，宽高比计算逻辑如下：

switch (rotationDegrees) {
    case 90:
    case 270:
        layout.setVideoAspectRatio(format.width == 0 ? 1 : (format.height * format.pixelWidthHeightRatio) / format.width);
    default:
        layout.setVideoAspectRatio(format.height == 0 ? 1 : (format.width * format.pixelWidthHeightRatio) / format.height);
}

这段代码存在两个问题：

1. 缺少 break 语句，导致无论旋转角度如何都会执行 default 分支
2. 没有正确处理 ExoPlayer 返回的不一致宽高比信息

解决方案

针对这个问题，开发者可以采取以下几种解决方案：

1. 临时修复方案： 在项目中直接修改 ExoPlayerView.java 文件，添加缺失的 break 语句：

   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);
   }
   

2. 视频流优化方案： 确保视频流的元数据正确反映实际分辨率，特别是对于竖屏视频，应该正确设置宽高比信息。

3. 等待官方修复： 关注 React Native Video 库的更新，官方已经确认这个问题并将发布修复版本。

最佳实践建议

为了避免类似问题，开发者在实现视频播放功能时应注意以下几点：

1. 始终明确设置视频的 resizeMode 属性（contain/cover/stretch）
2. 对于竖屏视频，确保视频源的元数据正确
3. 在视频加载回调中检查并处理视频的实际宽高比
4. 考虑添加错误边界处理，当检测到宽高比异常时重新加载视频

总结

React Native Video 库在 Android 平台上的视频宽高比异常问题是一个典型的跨平台兼容性问题，涉及底层媒体框架、视频元数据和上层实现多个层面的因素。开发者可以通过理解问题的根源，选择合适的解决方案，同时遵循视频处理的最佳实践，来确保应用中的视频播放体验稳定可靠。