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

【问题标题】：How to change the video displaying orientation in expo-av?如何更改 expo-av 中的视频显示方向？
【发布时间】：2021-01-27 13:52:40
【问题描述】：

我正在使用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 来获取设备方向。

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

【问题讨论】：

标签： react-native expo expo-av

【解决方案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}
          ...

【讨论】：