I am building a website in ReactJS. The first screen of this site contains three videos. I want to know how I can set up an event that gets triggered when all three videos have been loaded.

My goal is to display my loading animation until all of the videos have successfully loaded (so the user doesn't sit there staring at video containers waiting to be populated). Ideally when the loading animation is plete, the videos will be fully loaded and ready to be played with no UI interruptions.

Using lifecycle hooks for this use case does not seem to work, as these hooks will wait until the DOM has rendered, but not until the multimedia has loaded.

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

I have seen similar questions mentioning to use the <video> onLoad event:

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

but for some reason this function is never called.

This seems like a relatively mon use case so I'd highly appreciate advice on the correct solution.

Extra Info:

• These videos will be locally available (not fetched from an external endpoint)
• I prefer to stick to using functional ponents

I am building a website in ReactJS. The first screen of this site contains three videos. I want to know how I can set up an event that gets triggered when all three videos have been loaded.

My goal is to display my loading animation until all of the videos have successfully loaded (so the user doesn't sit there staring at video containers waiting to be populated). Ideally when the loading animation is plete, the videos will be fully loaded and ready to be played with no UI interruptions.

Using lifecycle hooks for this use case does not seem to work, as these hooks will wait until the DOM has rendered, but not until the multimedia has loaded.

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

I have seen similar questions mentioning to use the <video> onLoad event:

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

but for some reason this function is never called.

This seems like a relatively mon use case so I'd highly appreciate advice on the correct solution.

Extra Info:

• These videos will be locally available (not fetched from an external endpoint)
• I prefer to stick to using functional ponents

• javascript
• reactjs
• dom
• video
• user-experience

1 Answer 1

Try using the "onLoadedData" event.

I wrote a small demo to verify that all three videos have loaded using this event.

Using the onLoadedData event to trigger setVideoLoaded.

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

Increment the state each time the event is fired by a video loading. Then do some more stuff when all three are ready to play.

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

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