Reactjs 使用 React 更新 HTML5 视频的源 URL

当我想在一个视频中播放一个新的HTML5元素时，点击按钮来更新它.

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

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

我还有一个电影组件，它包含多个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.setState({ position: position });
  }
}

电影组件渲染剪辑组件和"下一步"按钮.单击Next按钮时，我想更新position属性，并使用sections中的Next URL重新呈现HTML5视频元素.

现在，当我点击Next时，HTML5视频源标签会更新，但元素会继续播放上一个URL中的视频.有人能帮我弄清楚如何重置视频元素吗？

Update:我创建了一个JSFIDLE，你可以看到here.

Update 2:更新视频元素的src属性有效！