如何更改expo-av中的视频显示方向？

Question

我用来expo-av显示视频。视频已播放Portrait，我正在尝试根据设备方向显示视频。我的代码是：

import { Video } from 'expo-av';
import * as ScreenOrientation from 'expo-screen-orientation';
import NavigationHelper from '../../../../Helpers/NavigationHelper';

export default class VideoScreen extends Component {
  render() {
    const { route } = this.props;
    const { videoUri } = route.params;

    if (!videoUri) {
      NavigationHelper.back();
    }

    return (
      <ScrollView style={styles.container}>
        <Video
          source={{ uri: videoUri }}
          rate={1.0}
          volume={1.0}
          isMuted={false}
          resizeMode={Video.RESIZE_MODE_CONTAIN}
          shouldPlay
          isLooping
          useNativeControls
          style={{ width: 300, height: 300, alignSelf: 'center' }}
          onReadyForDisplay={() => { const naturalSize = ScreenOrientation.Orientation.PORTRAIT ? { orientation: 'portrait' } : { orientation: 'landscape' }; }}
        />
      </ScrollView>
    );
  }
}

我已经看到onReadyForDisplay当视频准备好显示时要调用该函数。该函数传递一个具有以下键值对的字典： naturalSize：具有以下键值对的字典： orientation：描述视频数据自然方向的字符串，可以是portrait或landscape。我曾经用来expo-screen-orientation获取设备方向。

如何根据设备方向旋转视频？

Answer 1

你可以尝试一下

import { Video, VideoFullscreenUpdateEvent } from 'expo-av';
import * as ScreenOrientation from 'expo-screen-orientation';

    
  export const onFullscreenUpdate = async ({
      fullscreenUpdate,
    }: VideoFullscreenUpdateEvent) => {
      if (fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT) {
        await ScreenOrientation.unlockAsync();
      } else if (fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS) {
        await ScreenOrientation.lockAsync(
          ScreenOrientation.OrientationLock.PORTRAIT,
        );
      }
    };


    <Video
       source={{
           uri: videoUrl,
        }}
           onFullscreenUpdate={onFullscreenUpdate}
          ...