我正在使用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-> ...

如何避免这种闪烁？我要寻找的是下一张海报立即替换视频。我在这里看着this问题，但是没有答案可以解决。另外，我无法确定OP是否在做同样的事情。此外，鉴于需要更快地加载内容，因此我认为this的答案不可行。此外，我发现动态创建和销毁元素并不是最易于阅读的。