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

问题现象

在 React Native Video 组件（版本 6.6.1 及以上）中，当视频设置为循环播放（repeat=true）时，Android 平台上会出现视频宽高比突然变化的问题。具体表现为视频在第一次循环后，原本正确的显示比例会被破坏，导致视频拉伸或压缩变形。

技术背景

React Native Video 是一个流行的跨平台视频播放组件，在 Android 平台上底层使用 ExoPlayer 实现。视频宽高比的计算和处理是视频播放器核心功能之一，需要正确处理视频元数据中的宽高信息。

问题根源分析

经过深入排查，发现该问题由多个因素共同导致：

1. ExoPlayer 的宽高比计算缺陷：ExoPlayer 在处理某些视频流时，会不一致地报告视频尺寸信息，特别是在视频循环时。

2. React Native Video 的宽高比处理逻辑不完善：组件内部对视频旋转角度的处理存在缺陷，缺少必要的 break 语句，导致宽高比计算逻辑错误。

3. 视频源元数据问题：部分视频流（特别是 HLS 流）的元数据中声明的分辨率与实际视频方向不符（如声明为 1920x1080 但实际是 1080x1920 的竖屏视频）。

解决方案

临时解决方案

对于急需修复的开发者，可以手动修改 ExoPlayerView.java 文件，注释掉宽高比计算的特定代码段：

// 注释掉以下两行
// case 90:
// case 270:
//     layout.setVideoAspectRatio(format.width == 0 ? 1 : (format.height * format.pixelWidthHeightRatio) / format.width);

官方修复方案

React Native Video 官方已确认该问题并提供了修复补丁，主要修改包括：

1. 在宽高比计算逻辑中添加缺失的 break 语句
2. 增强对视频元数据的校验处理
3. 改进视频旋转角度变化的处理逻辑

建议开发者升级到最新版本以获取完整修复。

最佳实践建议

1. 视频源准备：

   • 确保视频元数据中的分辨率信息与实际视频方向一致
   • 对于竖屏视频，应在元数据中正确声明为高度大于宽度的分辨率

2. 组件使用：

   • 明确指定 resizeMode 属性（如 'contain' 或 'cover'）
   • 对于特殊方向的视频，考虑监听 onLoad 事件获取实际方向信息
   • 为视频提供合适的 poster 图片作为占位

3. 性能优化：

   • 根据实际场景调整缓冲策略
   • 合理设置播放器配置参数

总结

视频播放中的宽高比问题通常涉及多个层面的因素，从视频源准备到播放器实现都需要特别注意。React Native Video 作为跨平台组件，在处理这类问题时需要考虑不同平台的特性差异。开发者在使用时应当：

1. 确保视频源元数据准确
2. 使用最新版本的组件
3. 针对特殊场景进行充分测试
4. 了解底层播放器的特性和限制

通过以上措施，可以有效避免视频播放中的宽高比异常问题，提供更好的用户体验。