How to handle internet disconnection when loading an expo-av video component

Question

I have a simple reactnative component, which has the expo-av video element on it.

I'm having an issue were if the network is disconnected when attempting to play the video and then when the internet connection returns, it does not resume playing the video.

any ideas? some code below (simplified)

export default function VideoView(props: any) {
  const {question} = props;
  return <Video
    videoStyle={{marginHorizontal: 10}}
    source={{uri: question.video_url}}
    rate={1.0}
    volume={1.0}
    isMuted={false}
    resizeMode={ResizeMode.CONTAIN}
    shouldPlay
    ref={videoRef}
    style={{width: windowWidth, height: windowHeight}} 
  />
}

Did you find a solution? I am experiencing the same with expo-av audio — artsnr, Aug 24 '23 at 17:49

score 0 · Accepted Answer · answered Aug 25 '23 at 07:34

I simply listened for network changes.

also listened to onload event

<Video
          videoStyle={{marginHorizontal: 10}}
          source={{uri: question.video_url}}
          rate={1.0}
          volume={1.0}
          isMuted={false}
          onPlaybackStatusUpdate={status => onPlaybackStatusUpdate(status)}
          resizeMode={ResizeMode.CONTAIN}
          shouldPlay
          ref={videoRef}
          onLoad={() => {
            try{
              videoRef.current.setPositionAsync(0);
              videoRef.current.playAsync();
            } catch(err){
              console.log("Question Video",err);
            }
          }}
          style={{width: windowWidth, height: (windowWidth - 20) * 1.02}}
        />

also I used


import {useNetInfo} from '@react-native-community/netinfo';
const netInfo = useNetInfo();

i then wrapped the video element in this condition.

return !netInfo.isConnected ? <Video
          videoStyle={{marginHorizontal: 10}}
          source={{uri: question.video_url}}
          rate={1.0}
          volume={1.0}
          isMuted={false}
          onPlaybackStatusUpdate={status => onPlaybackStatusUpdate(status)}
          resizeMode={ResizeMode.CONTAIN}
          shouldPlay
          ref={videoRef}
          onLoad={() => {
            try{
              videoRef.current.setPositionAsync(0);
              videoRef.current.playAsync();
            } catch(err){
              console.log("Question Video",err);
            }
          }}
          style={{width: windowWidth, height: (windowWidth - 20) * 1.02}}
        /> : <span>Network offline</span>

Is this component your custom component or provided by expo-av? As far as I know expo-av doesn't have any component — artsnr, Aug 25 '23 at 16:12
Okay I don't think there is an Audio component. Just the Audio API's are available. Anyways, I see you are reloading it from the start by setPositionAsync(0) but how to resume the video/audio where it was interrupted? — artsnr, Aug 25 '23 at 16:38
@artsnr just call `videoRef.current.playAsync();` and it will continue where it left off — Dean Van Greunen, Aug 25 '23 at 18:25

How to handle internet disconnection when loading an expo-av video component

1 Answers1