При изменении источника видеоэлемента перед изменением React мигает плакат.

Question

Я использую React-Redux для создания видеоплеера, который просматривает список видео. Я передаю как список источников, так и индекс этого списка, который должен быть воспроизведен.

import images from 'imgsource';

const VideoPlayer = ({ activeIndex, videoList }) => {
  const posterSrc = /* gets path using videoList and activeIndex to find in images */
  return (
    <div className='VideoPlayerParent'>
      <video 
        src={videoList[activeIndex]} 
        poster={posterSrc}
        autoplay
      />
    </div>
  );
};

Однако, когда видео заканчивается, и activeIndex изменяется, изображение плаката отображается перед следующим плакатом. изображение загружается. По сути, это звучит так:

vid1Poster -> vid1 -> vid1Poster -> vid2Poster -> vid2 -> vid2Poster -> vidNPoster -> vidN -> ...

Как можно избежать этогомигает? Все, что я ищу, - это то, что следующий постер немедленно заменит видео. Я посмотрел на этот вопрос здесь, но не было ответов, которые его решили. Кроме того, я не мог сказать, делал ли OP то же самое. Кроме того, я не нашел этот ответ возможным, учитывая необходимость более быстрой загрузки вещей. Кроме того, я не считаю, что динамическое создание и уничтожение элемента лучше всего подходит для удобства чтения.