使用React在HTML5视频上更新源URL

Question

我想更新HTML5视频元素中的source标签，以便单击按钮时，无论播放什么内容，都将切换到新视频。

我有一个Clip组件，它返回一个HTML5视频元素，其源URL通过props提供。

function Clip(props) {
  return (
    <video width="320" height="240" controls autoPlay>
      <source src={props.url} />
    </video>
  )
}

我还有一个Movie组件，其中包含多个URL，每个URL对应于电影的一部分。它还包含一个position属性，它通过记住当前正在播放的部分来充当迭代器。

class Movie extends Component {
  constructor() {
    super();
    this.state = {
      sections: [
        'https://my-bucket.s3.amazonaws.com/vid1.mp4',
        'https://my-bucket.s3.amazonaws.com/vid2.mp4'
      ],
      position: 0
    };
  }
  render() {
    const sections = this.state.sections
    const position = this.state.position

    return (
      <div>
        {position}
        <Clip url={sections[position]} />
        <button onClick={() => this.updatePosition()}>Next</button>
      </div>
    )
  }
  updatePosition() {
    const position = this.state.position + 1;
    this.html" target="_blank">setState({ position: position });
  }
}

电影组件呈现一个Clip组件和一个“ Next”按钮。单击“下一步”按钮后，我想更新位置属性，并使用部分中的下一个URL重新呈现HTML5视频元素。

到目前为止，当我单击“下一步”时，HTML5视频源标记将更新，但是该元素将继续播放前一个URL中的视频。谁能帮我弄清楚如何重置视频元素？

更新： 我创建了一个JSFiddle，您可以在这里看到。

更新2： 更新video元素上的src属性是可行的！

Answer 1

短篷：key在<Clip>或上添加道具<video>，例如：

function Clip({ url }) {
  return (
    <video key={url}>
      <source src={url} />
    </video>
  );
}

长遮篷：
视频不会改变，因为从本质上讲，您只是在修改<source>元素，而React知道<video>应该保持不变，因此不会在DOM上对其进行更新，也不会触发load该源的新事件。

为了确保不仅<source>得到更新，还要确保对其进行更新<video>，key以便React理解这是一个全新的元素。

有关更完整的说明，请查看有关React docs上的键的本文：）