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

Posted 2023-05-08

【中文标题】防止 HTML 5 `video` 在 src 更改时闪烁海报图像

【英文标题】：Prevent HTML 5 `video` from flashing poster image on src change

【发布时间】：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 事件来检测视频何时完成加载。

【参考方案1】：

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

myButtonHandler(videoSrc) 
  this.setState(
    videoSrc
  )

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

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

【讨论】：

我的那部分工作正常！我的问题是加载新视频时海报图片会闪烁，我希望视频播放器继续播放旧视频，直到新视频准备就绪

您可能需要两个元素，一个用于当前正在播放的视频，一个用于新视频，一个用于触发加载或 canplay 事件，然后交换它们...