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

发布时间：2020-12-15 20:40:41 所属栏目：百科来源：网络整理

导读：我的网页上有一个视频标签()和一个“播放/暂停”按钮,当用户点击它时,视频开始/停止播放.如果我不允许使用js来调用“getElementById”然后使用play()/ pause()内置方法,我怎么能做出反应呢？任何的想法？最直接的方法是使用refs,这是一个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,所以你可以查看一个完整的例子.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!