How to display video landscape in expo-av?

Question

I'm needing to rotate my video screen as soon as I press my video's fullscreen button in expo-av. My code is:

import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { View, StyleSheet, Dimensions, } from 'react-native';
import { Video, } from 'expo-av';

const { width, height } = Dimensions.get('window');

export default function Playlist(){
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});
  return(
    <View style={styles.container}>
       <StatusBar style='light' />
          <View style={styles.containervideo}>
          <Video
          ref={video}
          style={styles.video}
          source={{
            uri: 'http://168.232.157.7:65081/12Apostolos/video.m3u8',
          }}
          useNativeControls={true}
          resizeMode="contain"
          onReadyForDisplay={}
          orientation="ladscape"
          shouldPlay={false}
          isLooping={false}
          onPlaybackStatusUpdate={status => setStatus(() => status)}
        />
          </View>
    </View>
  )
}

How can I rotate the video depending on device orientation? And I need it to rotate as soon as I press the full screen button.

Hassan Jeelani · Answer 1 · 2022-06-09T08:05:14.607

import * as ScreenOrientation from 'expo-screen-orientation'
import { Video } from 'expo-av'
import VideoPlayer from 'expo-video-player'

. .

const [inFullscreen, setInFullsreen] = useState(false)
 const refVideo = useRef(null)

. . .

<VideoPlayer
    videoProps={{
      shouldPlay: false,
      resizeMode: Video.RESIZE_MODE_CONTAIN,
      source: {
        uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      },
      ref: refVideo,
    }}
    fullscreen={{
      enterFullscreen: () => {
        setInFullsreen(!inFullscreen)
        refVideo.current.setStatusAsync({
          shouldPlay: true,
        })
      },
      exitFullscreen: () => {
        setInFullsreen(!inFullscreen)
        refVideo.current.setStatusAsync({
          shouldPlay: false,
        })
      },
      inFullscreen,
    }}
    style={{ height: 160 }}
      slider={{
        visible: true,
      }}
  />

How to display video landscape in expo-av?

1 Answers1