Prevent HTML 5 `video` from flashing poster image on src change

问题

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?

回答1:

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 will be your static string which represents the url.

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

来源：https://stackoverflow.com/questions/53907942/prevent-html-5-video-from-flashing-poster-image-on-src-change