防止HTML 5`video`在src更改时闪烁海报图像 [英] Prevent HTML 5 `video` from flashing poster image on src change

问题描述

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

In React, I'm using a video element to dynamically load static video files depending on what button the user clicks, and each time the video changes the poster image is displayed briefly. Here's what my video player markup looks like:

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

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

I'm trying to find a way to wait for the new video to load before stopping the old one so I can get rid of the quick flash of the poster image in between videos. Is there a way to do that?

推荐答案

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

You should use the components setState() method to achieve this. Your video source will look like src=state.videoSrc while your button handler will be something like this:

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

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

videoSrc will be your static string which represents the url.

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

这篇关于防止HTML 5`video`在src更改时闪烁海报图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！