HTML5 视频会闪烁，并对同一视频发出其他请求

Question

我有一个弹出式模式 React 组件来渲染选项卡。模式顶部是选项卡，用户可以在其中选择显示该选项卡中的某些信息。其中一个选项卡通过此代码片段呈现视频。

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

我的问题是：

• 当用户第一次单击带有此视频的选项卡时，将不会有视频，而是最终会出现一个空白点
，视频应该在几秒钟内出现。
• 当用户单击另一个选项卡并单击返回此视频时，将发生同样的事情，并且对该视频发出相同的请求。

我想知道是否有可能：

1. 预加载视频，以便在渲染组件时不会有闪光灯
2. 防止对同一视频的后续冗余请求

Answer 1

当你切换标签时，React 最有可能将视频从 DOM 中取出。如果您可以在选项卡开关上隐藏它，则不必重新获取文件。

此外，您可以尝试这样做来停止闪光灯，因为它只会加载第一帧以及其他一些元数据，因此加载速度会快得多。

<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>