Несколько тегов видео на одной странице, обменивая видео между собой

Question

Я использую теги <video> для показа нескольких видео на моей веб-странице. Видео воспроизводятся случайным образом с разными тегами. Видео одного тега воспроизводится в другом видео-теге, другие атрибуты тега <video> остаются правильными, только содержимое видео заменяется другими

<video id={"video-"+ this.props._id}  width="100%" controls preload="metadata" poster={this.props.poster}>
    <source src={this.props.url} type="video/mp4 " />
</video>

Существует несколько таких видео, и все они воспроизводятся в случайном порядке. В проверке элемента URL и другие атрибуты в порядке. Использование Preact. Почему это происходит? Благодарю.

Answer 1

Я решил эту проблему с помощью одного парня. Я перезагрузил видео src, ниже код отлично работает для меня

ComponentDidUpdate(){
  let video_el = document.getElementById("<video-element-id>") // get reference
  video_el.src = new_src // change src
  video_el.load() // <-- bug fix
}