让 React useEffect 检查视频链接是否有视频可用

Question

我面临一个困难。我正在开发自定义视频播放器，我正在尝试使用 useEffect 检查视频源是否有视频（它会打开一个链接，但永远不会启动）。这是视频链接http://media.xiph.org/mango/tears_of_steel_1080p.webm

我想要做的是检查 5 秒是否可以加载视频，如果不能 - 将 isLoaded 状态更改为 false，阻止控件，如果在 5 秒内没有解决 - 重定向到错误路由（或 console.log例如）。如果一切正常并且一切都加载了 - 将 isLoaded 更改为 true 并在视频可用后立即开始播放。

我可以检查videoRef的current.duration是否不等于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>)
}

希望您能提供帮助。谢谢！

Answer 1

我做了一些测试，看看如果视频不可用，你如何处理你的状态

在您的 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
      }
    })();
  }, []);

如果你的 fetch 没有错误，useEffect 不会捕捉到错误，你可以编写你的代码