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

编程问答 2022-05-30

问题描述

我正在用 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???")}}
/>

但由于某种原因，这个函数从未被调用过。

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

额外信息：

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

domjavascriptreactjsreactjsuser-experiencevideo