在Redux中缓存加载的WebM

Question

我有一个使用React-Redux的网页，可以循环显示许多短视频（如.webms和mp4s）。

当前，这是通过页面循环浏览包含视频URL的字符串数组来完成的。

export const VideoDisplay = ({videos = ["https://examplevideosource.com/video1.webm","https://examplevideosource.com/video2.webm"] }, activeVidIndex = 0) => {
    return (
        <div className="VideoDisplayer">
            <video src={videos[activeVidIndex]}/>
        </div>
    );

但是，这似乎效率很低。每次显示新视频时（大约每3-15秒一次），都会发出一个新请求，以获取大约一分钟前播放的视频对象。另外，有时，在一个视频结束和下一个显示之间，会有加载延迟，然后不显示任何内容，在应有视频的地方留出空白。

有没有一种方法可以将所有视频简单地加载到本地存储中，然后遍历它们而不需要每次都调用源？