如何解决你如何让 React 等待所有多媒体完全加载?
我正在用 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???")}}
/>
这似乎是一个相对常见的用例,因此我非常感谢有关正确解决方案的建议。
额外信息:
解决方法
尝试使用“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!");
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。