防止HTML 5`video`在src更改时闪烁海报图像

Question

在React中，我使用video元素来动态加载静态视频文件，具体取决于用户单击的按钮，并且每次视频更改海报图像时都会短暂显示。这是我的视频播放器标记的样子：

<video
    id="video-player"
    controls
    controlsList="nodownload"
    autoPlay={props.autoplay}
    src={props.video}
    onMouseOver={(e) => e.target.controls = true}
    onMouseOut={(e) => e.target.controls = false}
    poster={poster}
>

我正试图找到一种方法来等待新视频加载，然后再停止旧视频，这样我就可以摆脱视频之间海报图像的快速闪烁。有办法吗？

Answer 1

您应该使用组件setState()方法来实现此目的。您的视频源看起来像src=state.videoSrc，而按钮处理程序则是这样的：

myButtonHandler(videoSrc) {
  this.setState({
    videoSrc
  })
}

videoSrc将是代表URL的静态字符串。

https://reactjs.org/docs/state-and-lifecycle.html