如何在React Native项目中使用Expo Video获取视频尺寸？

在Expo项目里，你可以通过两种常用方式获取视频的宽高尺寸：

方法1：利用Video组件的onLoad回调事件 #

当视频加载完成时，onLoad回调会返回包含视频元数据的对象，其中就包含自然尺寸（naturalSize）信息。

示例代码：

import { View } from 'react-native';
import { Video } from 'expo-av';

export default function VideoSizeExample() {
  const handleVideoLoad = (status) => {
    if (status.isLoaded) {
      const { width, height } = status.naturalSize;
      console.log('视频尺寸：', width, height);
      // 这里可以把尺寸存到状态里供后续使用
    }
  };

  return (
    <View>
      <Video
        source={{ uri: 'https://example.com/your-video.mp4' }} // 替换为你的视频地址或本地资源
        style={{ width: 300, height: 200 }}
        onLoad={handleVideoLoad}
        resizeMode="contain"
      />
    </View>
  );
}

方法2：使用expo-av的getVideoInfoAsyncAPI预获取尺寸 #

如果不需要渲染视频，只是想提前获取视频的尺寸信息，可以直接调用这个API，支持本地文件路径、远程URL或Expo Asset。

示例代码：

import { AV } from 'expo-av';

async function getVideoDimensions(videoUri) {
  try {
    const videoInfo = await AV.getVideoInfoAsync(videoUri);
    const { width, height } = videoInfo.naturalSize;
    console.log('视频尺寸：', width, height);
    return { width, height };
  } catch (error) {
    console.error('获取视频信息失败：', error);
    return null;
  }
}

// 调用示例：
// getVideoDimensions('https://example.com/your-video.mp4');
// 或者本地资源：getVideoDimensions(require('./assets/your-video.mp4'));

注意事项 #

• 确保项目中已包含expo-av库（Expo项目默认集成，裸React Native项目需手动安装配置）。
• 远程视频需确保设备有网络权限，本地视频要确认文件路径正确。

内容的提问来源于stack exchange，提问作者omar