HTML5 video flashes and makes additional requests for the same video

Question

I have a pop-up modal React component that renders tabs. At the top of the modal are tabs where users can select to show certain information within that tab. One of the tabs render a video via this snippet of code.

<video autoPlay loop muted playsInline>
    <source src="some-video-file.webm" type="video/webm" />
    <source src="some-video-file.mp4" type="video/mp4" />
</video>

My problems are:

• When a user first clicks on the tab with this video, there will not be a video and instead, will end up with a blank spot where the video is suppose to be for a few seconds.
• When a user clicks on another tab and clicks back to this video, the same thing will happen and the same request for that video is made.

I was wondering if it were possible to:

1. Preload the video so when the component is rendered, there will be no flash
2. Prevent subsequent, redundant request for the same video

Answer 1

React is taking the video out of the DOM when you switch tabs most likely. If you could just hide it on tab switch, it would not have to re-fetch the files.

Also, you could try this to stop the flash, as it would load much faster since it only loads the first frame as well as some other meta data.

<video autoPlay loop muted playsInline>
    <source src="some-video-file.webm" type="video/webm" preload="metadata" />
    <source src="some-video-file.mp4" type="video/mp4" preload="metadata" />
</video>