Javascript 缓存加载的webm'；Redux中的s

我有一个使用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>
    );

export const VideoDisplay=（{videos=[”https://examplevideosource.com/video1.webm","https://examplevideosource.com/video2.webm“]}，activeVidIndex=0）=>{
返回(
);

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

有没有一种方法可以简单地将所有视频加载到本地存储中，然后在不需要每次调用源的情况下对其进行迭代