javascript - 防止 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