Предотвратить HTML 5 `видео` от мигающего изображения плаката при смене 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