同一页面中的多个视频标签相互交换视频

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
}