我正在使用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的答案不可行。此外,我发现动态创建和销毁元素并不是最易于阅读的。