你如何让 React 等待所有多媒体完全加载？

Question

我正在用 ReactJS 构建一个网站。该站点的第一个屏幕包含三个视频。我想知道如何设置在 所有三个视频 都已加载时触发的事件。

我的目标是显示我的加载动画，直到所有视频都成功加载（这样用户就不会坐在那里盯着等待填充的视频容器）。理想情况下，当加载动画完成时，视频将完全加载并准备好播放，没有 UI 中断。

对该用例使用生命周期挂钩似乎不起作用，因为这些挂钩将等到 DOM 呈现，但不会等到多媒体加载。

  // Does not work
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    setIsLoading(false)
  });

我看到类似的问题提到使用 <video> onLoad 事件：

<video ref={video1}
    autoPlay
    playsInline
    muted
    className="video"
    loop
    src={bike}
    onLoad={()=>{console.log("I don't get called???")}}
/>

但由于某些原因，此函数从未被调用。

这似乎是一个相对常见的用例，因此非常感谢有关正确解决方案的建议。

额外信息：

这些视频将在本地可用（不是从外部端点获取）
我更喜欢坚持使用功能组件

Answer 1

尝试使用“onLoadedData”事件。

我写了一个小 demo 来验证所有三个视频都已使用此事件加载。

使用onLoadedData事件触发setVideoLoaded。

      <video
        autoPlay
        playsInline
        muted
        className="video"
        loop
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        onLoadedData={() => {
          setVideoLoaded();
        }}
      />

每次加载视频触发事件时增加状态。然后在三个都准备好玩的时候再做一些事情。

const [loadCount, setLoadCount] = useState(0);

  const setVideoLoaded = () => {
    console.log("video loaded");
    if (loadCount <= 1) {
      setLoadCount(loadCount + 1);
    } else {
      console.log("All videos loaded!");
    }
  };

你如何让 React 等待所有多媒体完全加载？

How do you make React wait for ALL multimedia to be fully loaded?

javascript

video

dom

user-experience

reactjs