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

前端之家收集整理的这篇文章主要介绍了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,所以你可以查看一个完整的例子.

原文链接:https://www.f2er.com/react/300650.html

猜你在找的React相关文章