6

I'm using expo-av to display videos. The videos are played in Portrait and i'm trying to display the video depending on the device orientation. My code is :

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>
    );
  }
}

I've seen that onReadyForDisplay is function to be called when the video is ready for display. The function is passed a dictionary with the following key-value pairs: naturalSize: a dictionary with the following key-value pairs: orientation: a string describing the natural orientation of the video data, either portrait or landscape. I've used expo-screen-orientation to get the device orientation.

How can i rotate the video depending on the device orientation ?

Abdo Rabah
  • 1,670
  • 2
  • 15
  • 31

1 Answers1

0

you can try it

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}
          ...
ianfelix
  • 1
  • 1