HTML5 视频滑块加载问题

我在 React 中创建了一个 web 应用程序，并为这个应用程序创建了一个 html5 视频滑块。滑块逐个呈现视频。因为它们在一个子组件中，所以渲染看起来像这样：

if (currentIndex == slideIndex) <Slide />

它总是重新渲染当前视频。

因为滑块是无限的，当您忘记打开网站并永久加载视频时，这会导致大量数据使用。

我也在考虑移除条件渲染，只使用 style display 属性，但我认为它会导致同样的问题，或者可能是视频的不透明度，但我觉得这些只是一半的解决方案.

是否有避免这种情况的常见做法？不幸的是，我不能放弃视频滑块，因为这将是一家电影制作公司的投资组合。

感谢您的回答！