Search code examples
videoserverexpouriexpo-av

React Native expo-av video being retrieved from server by uri, working on android but returning black screen on iOS

this is my first question so excuse any errors in formatting this:

I'm running a django backend on PythonAnywhere and I store videos in a media file there. Inside a screen I am trying to show one of these videos:

<Video
      ref={video}
      isMuted={muted}
      style={styles.video}
      source={{postVid}}
      useNativeControls="false"
      resizeMode="contain"
      isLooping={true}
      onPlaybackStatusUpdate={(status) => setStatus(() => status)}
      shouldPlay={itemAutoPlay}/>

postVid is a prop passed in from the parent screen, and when I log postVid to the console I get an object with a "uri" property, and a link to the server location where the video is stored.

When I visit this link, I get a video screen that displays a black screen which you can see here. I can hear the audio though, and when I download the video it plays normally.

The video plays perfectly on Android but does not play at all on iOS (not even audio). When I download the video and move it to the Assets folder, the video plays correctly on iOS. What might be the problem?

Solution

  • iOS requires byte range server support, but that is not available on PythonAnywhere.