javascript - Cách xử lý mất kết nối internet khi tải một thành phần video expo-av

Tôi có một component reactnative đơn giản, trong đó có phần tử video expo-av.

Tôi đang gặp sự cố khi nếu mạng bị ngắt kết nối khi cố gắng phát video và sau đó khi kết nối internet trở lại, video không tiếp tục phát.

có ý tưởng nào không? dưới đây là một số mã (đã được đơn giản hóa)

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

Câu trả lời #1

Tôi thay đổi một state để render lại component video. nhưng cách này sẽ phát lại video từ đầu. (nó hữu ích trong các tình huống khi playAsync() không hoạt động)

const {isConnected, type, isInternetReachable} = useNetInfo();


const [reloadKey, setReloadKey] = useState(0);


useEffect(() => {
    if (type !== "unknown") {
      if (isInternetReachable) {
        setReloadKey(prev => prev + 1);
      }
    }
}, [isConnected, isInternetReachable, type]);



<Video
  key={reloadKey}
  ...
 />

Câu trả lời #2

Tôi chỉ đơn giản lắng nghe các thay đổi của mạng.

cũng lắng nghe sự kiện onload

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

cũng tôi đã sử dụng

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

sau đó tôi bọc phần tử video trong điều kiện này.

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>