Кэширование загруженных веб-страниц в Redux

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 секунд), выдается новый запрос на получение видеообъекта, который был воспроизведен около минуты назад. Кроме того, иногда между окончанием одного видео и последующим отображением возникает задержка загрузки, которая затем ничего не отображает, оставляя пустое место, где должно быть видео.

Есть ли способ просто загрузитьвсе видео в локальном хранилище, а затем просто просмотреть их без необходимости каждый раз вызывать источник?