小编She*_*way的帖子

我想更新HTML5视频元素中的源标记,这样当我点击一个按钮时,无论播放什么都会切换到新视频.

我有一个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.setState({ position: position });
  }
}

Movie组件呈现Clip组件和"Next"按钮.单击"下一步"按钮时,我想更新位置属性,并使用部分中的下一个URL重新呈现HTML5视频元素.

截至目前,当我点击下一步HTML5视频源标签更新,但该元素继续播放上一个URL中的视频.任何人都可以帮我弄清楚如何重置视频元素？

更新: …