reactjs – 如何在没有外部库的情况下在React中播放/暂停视频？

我的网页上有一个视频标签()和一个“播放/暂停”按钮,当用户点击它时,视频开始/停止播放.如果我不允许使用js来调用“getElementById”然后使用play()/ pause()内置方法,我怎么能做出反应呢？
任何的想法？

最直接的方法是使用refs,这是一个React功能,可以让你调用从render()返回的组件实例上的方法.

您可以在文档中阅读更多内容：https://facebook.github.io/react/docs/more-about-refs.html

在这种情况下,只需在视频标签中添加一个参考字符串,如下所示：

<video ref="vidRef" src="some.mp4" type="video/mp4"></video>

这样,当您向按钮添加点击处理程序时：

<button onClick={this.playVideo.bind(this)}>PLAY</button>

playVideo方法可以通过refs访问您的视频参考：

playVideo() {
  this.refs.vidRef.play();
}

这是一个工作DEMO,所以你可以查看一个完整的例子.