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

【问题标题】：Prevent HTML 5 `video` from flashing poster image on src change防止 HTML 5 `video` 在 src 更改时闪烁海报图像
【发布时间】：2019-05-23 07:01:52
【问题描述】：

在 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}
>

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

【问题讨论】：

您可以尝试使用promise 加载一个新的视频元素，然后在它解析时替换该视频元素。
我会在承诺中加载什么？视频反应/DOM 元素？我怎么知道它已经完成加载？
您可以加载一个新的视频元素，并且承诺只有在完成加载元素后才会解析。或者，您可以使用onLoad 事件来检测视频何时完成加载。

标签： javascript html reactjs html5-video

【解决方案1】：

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

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

videoSrc 将是您的静态字符串，代表 url。

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

【讨论】：

我的那部分工作正常！我的问题是加载新视频时海报图片会闪烁，我希望视频播放器继续播放旧视频，直到新视频准备就绪
您可能需要两个元素，一个用于当前正在播放的视频，一个用于新视频，一个用于触发加载或 canplay 事件，然后交换它们...