Javascript ReactJS html5视频-如何捕捉视频'；单击鼠标上的控件

我需要根据用户是否单击

播放

/

暂停

控件或是否要选择视频的特定时刻来执行各种操作

到目前为止，我已经做到了：

constructor(props) {
    super(props);

    this.state = {
        videoSrc: "static/dt1.mp4",
    }
    this.testClick = this.testClick.bind(this);
}
testClick(evt) {
  console.log("hello");
}

render() {
  return (
    <video ref={(video1) => { this.video1 = video1; }} onClick={this.testClick} width="100%" height="350"controls>
      <source src={this.state.videoUrl} type="video/mp4" />
    </video>
  );
}

构造函数（道具）{
超级（道具）；
此.state={
videoSrc：“static/dt1.mp4”，
}
this.testClick=this.testClick.bind（this）；
}
测试点击（evt）{
console.log（“你好”）；
}
render（）{
返回(
{this.video1=video1；}}onClick={this.testClick}width=“100%”height=“350”控件>
);
}

所以，这里，如果我点击视频本身，我有hello打印。但是如果我点击控件，什么都不会发生

也许我搜索错了，但到目前为止我在谷歌上找不到任何东西

我如何知道用户是否单击了播放/暂停或选择了视频的时间帧？我是否绝对需要一个像这样的图书馆： ?

---

注：我不想使用任何jQuery。

使用react，您可以使用以下任何一种：

onAbort onCanPlay onCanPlay onCanPlay通过ONDURANCE更改一个空的ONECURED onEnded ONERR onLoadedData onLoadedMetadata onLoadStart ON暂停ON播放 关于播放关于进度关于费率更改关于查看关于安装关于暂停 onTimeUpdate onVolumeChange onWaiting

构造函数（道具）{
超级（道具）；
此.state={
videoSrc：“static/dt1.mp4”，
}
this.testClick=this.testClick.bind（this）；
this.onPlay=this.onPlay.bind（this）；
}
testClick（evt）{
console.log（“你好”）；
}
在线播放（evt）{
console.log（“视频开始播放”）；
}
render（）{
返回(
{this.video1=video1；}}onClick={this.testClick}width=“100%”height=“350”onPlay={this.onPlay}控件>
);
}

使用react，您可以使用以下任一选项：

onAbort onCanPlay onCanPlay onCanPlay通过ONDURANCE更改一个空的ONECURED onEnded ONERR onLoadedData onLoadedMetadata onLoadStart ON暂停ON播放 关于播放关于进度关于费率更改关于查看关于安装关于暂停 onTimeUpdate onVolumeChange onWaiting

构造函数（道具）{
超级（道具）；
此.state={
videoSrc：“static/dt1.mp4”，
}
this.testClick=this.testClick.bind（this）；
this.onPlay=this.onPlay.bind（this）；
}
testClick（evt）{
console.log（“你好”）；
}
在线播放（evt）{
console.log（“视频开始播放”）；
}
render（）{
返回(
{this.video1=video1；}}onClick={this.testClick}width=“100%”height=“350”onPlay={this.onPlay}控件>
);
}

我会简单地将

视频

包装在一个

div

的catch

onClick

包装中

构造函数（道具）{
超级（道具）；
此.state={
videoSrc：“static/dt1.mp4”，
}
this.testClick=this.testClick.bind（this）；
}
测试点击（evt）{
console.log（“你好”）；
}
render（）{
返回(
{this.video1=video1；}}width=“100%”height=“350”控件>
);
}

我会简单地将

视频

包装在一个

div

的catch

onClick

包装中

构造函数（道具）{
超级（道具）；
此.state={
videoSrc：“static/dt1.mp4”，
}
this.testClick=this.testClick.bind（this）；
}
测试点击（evt）{
console.log（“你好”）；
}
render（）{
返回(
{this.video1=video1；}}width=“100%”height=“350”控件>
);
}

constructor(props) {
    super(props);

    this.state = {
        videoSrc: "static/dt1.mp4",
    }
    this.testClick = this.testClick.bind(this);
    this.onPlay = this.onPlay.bind(this);
}

testClick (evt) { 
  console.log("hello");
}

onPlay (evt) {
    console.log("video start play");
}

render() {
  return (
    <video ref={(video1) => { this.video1 = video1; }} onClick={this.testClick} width="100%" height="350" onPlay={this.onPlay} controls>
      <source src={this.state.videoUrl} type="video/mp4" />
    </video>
  );
}