React Native Video组件在iOS设备上的视频尺寸与方向解析问题

问题背景

在使用React Native Video组件(v6.0.0版本)处理iOS设备上的视频时，开发者遇到了一个关于视频尺寸和方向信息的异常现象。当通过react-native-image-crop-picker选择竖屏视频后，Video组件返回的元数据中，视频的宽高尺寸和方向信息出现了反转。

具体现象

开发者选取了一个分辨率为1080x1920的竖屏视频，这符合iPhone拍摄的典型竖屏视频规格。然而，Video组件的onLoad回调返回的naturalSize对象却显示为：

• 宽度：1920
• 高度：1080
• 方向：landscape(横屏)

这与实际视频属性完全相反，导致依赖这些元数据进行后续处理的逻辑出现错误。

技术分析

经过深入排查，发现问题出在iOS原生层的实现逻辑上。Video组件在获取视频元数据时，错误地使用了videoTrack.naturalSize而非更准确的_playerItem.presentationSize属性。

在iOS AVFoundation框架中：

• presentationSize属性会返回视频在播放时的实际显示尺寸，考虑了视频的方向元数据
• 而naturalSize则直接返回视频轨道存储的原始尺寸，不考虑方向信息

对于现代iPhone拍摄的视频，虽然文件存储时可能保持传感器采集的原始方向，但会通过元数据标记实际拍摄方向。正确的实现应该综合考虑这些信息来返回最终显示尺寸。

解决方案

该问题已在React Native Video组件的6.1.2版本中得到修复。升级到最新版本后，onLoad回调将返回正确的视频尺寸和方向信息。

对于暂时无法升级的项目，开发者可以考虑以下临时解决方案：

1. 手动交换宽高值并调整方向标记
2. 使用第三方库如react-native-video-processing获取准确的视频信息
3. 在原生层修改获取视频尺寸的逻辑，优先使用presentationSize

最佳实践建议

处理移动端视频时，开发者应注意：

1. 始终验证视频元数据的准确性
2. 考虑不同设备和拍摄方式可能产生的方向差异
3. 对于关键业务逻辑，实现额外的验证层
4. 保持依赖库的最新版本以获取错误修复

这个问题提醒我们，在跨平台视频处理中，方向信息的正确处理至关重要，特别是在内容创作、编辑和展示等场景下。