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}}
/>
}
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>