Динамическая загрузка видео с localhost и получение 206 частичного контента

Question

Я использую простой react стек с redux.Затем я динамически извлекаю данные с местоположениями видео из google spreadsheet, это означает, что мне нужно импортировать видеофайлы на лету:

//videoType is the name of the row for videos in the spreadsheet
const videoType = 'outVideo';
const videoData = await import(`../../media/${video[videoType]}`);
this.setState({[videoType]: videoData.default});

Это также означает, что видео активы загружаются вкак только компонент будет отрендерен, но в качестве обещания:

Затем он будет загружен в компонент, и когда наступит подходящее время, отобразите видео(так что у нас есть активы, доступные для тега html5 video при инициации элемента:

      <div className="outVideo">
        {outVideo !== "" &&
          <video
            ref={this[`outVideo${reference}`]}
            autoPlay="autoplay"
            playsInline="playsinline"
          >
            <source
              src={outVideo}
              type="video/mp4"/>
          </video>
        }
      </div>

Я только что переключился с файлов 800kb на 95mb файлов и пока получуМне любопытно, почему видео просто отображается как white space, а видео отсутствует:

Насколько я понимаю, не следует использовать 206