Блог

Я столкнулся с одной трудностью. Я работаю над пользовательским видеопроигрывателем и пытаюсь проверить с помощью useEffect, есть ли у источника видео видео (он открывает ссылку, но никогда не запускается). Вот ссылка с видео http://media.xiph.org/mango/tears_of_steel_1080p.webm

Что я хочу сделать, так это проверить в течение 5 секунд, можно ли загрузить видео, и если нет — изменить состояние isLoaded на false, заблокировать элементы управления, и если через 5 секунд это не будет решено — перенаправить на маршрут ошибки (или консоль.например, журнал). Если все в порядке и все загружается — измените значение на true и запустите видео сразу после его доступности.

Я могу проверить, не равен ли current.duration для videoRef 0 или current.networkState, но я не знаю, как проверить это в течение 5 секунд и запустить, если все в порядке.

Вот мой код:

 const PlayerScreen = (props) => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);

  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    video.oncanplay = () => {
      setIsPlaying(true);
      video.play();
    };

    video.onplay = () => {
      setIsPlaying(true);
    };

    video.onpause = () => {
      setIsPlaying(false);
    };

    video.ontimeupdate = () => {
      if (video.currentTime !== 0) {
        handleTimeElapsed();
        handleProgress();
      }
    };

    return () => {
      video.oncanplaythrough = null;
      video.onplay = null;
      video.onpause = null;
      video.ontimeupdate = null;
    };
  }, []);

  const {
    film: {
      previewImg,
      videoSrc
    },
  } = props;

  return (
    <div className="player">
      <video
        className="player__video"
        ref={videoRef}
        src={videoSrc} // http://media.xiph.org/mango/tears_of_steel_1080p.webm 
        poster={previewImg}
      />
    </div>)
}
 

Надеюсь, вы сможете помочь. Спасибо!

Я провел несколько тестов, чтобы узнать, как вы можете справиться со своим состоянием, если видео недоступно

в вашем useEffect сделайте запросы, чтобы узнать, есть ли сетевая ошибка или нет, и установите тайм-аут, чтобы время выборки не было бесконечным.

 React.useEffect(() => {
    (async () => {
      try {
        const result = await Axios.get(
          "http://media.xiph.org/mango/tears_of_steel_1080p.webm",
          { timeout: 5000}
        );
        // Do something here
      } catch (e) {
        console.log("The link is not avaible", e.message);
        // Do something here
      }
    })();
  }, []);
 

Если в вашей выборке нет ошибки, useEffect не обнаружит ошибку, и вы можете написать свой код