让 React useEffect 检查视频 link 是否有可用的视频

Question

我遇到了一个困难。我正在开发自定义视频播放器，我正在尝试使用 useEffect 检查视频源是否有视频（它打开 link，但从未启动）。这是 link 和视频 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 不会捕获错误，你可以编写你的代码

让 React useEffect 检查视频 link 是否有可用的视频

Making React useEffect check whether video link has video available

video

reactjs

react-hooks