javascript - ReactJS html5 视频 - 如何捕获点击时的视频控件

Question

我需要执行各种操作，具体取决于用户是否单击了播放/暂停控件或者他是否想要选择视频的特定时刻。

到目前为止我已经做到了:

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>
  );
}

所以，如果我点击视频本身，我就会打印出“hello”。但如果我点击控件，什么也不会发生......

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

我如何知道用户是否点击了播放/暂停或选择了视频的时间范围？我绝对需要一个像这样的库吗: http://docs.videojs.com/index.html ？

Ps:我不想使用任何 jQuery。

Answer 1

使用 React，您可以使用 media events 中的任何一个:

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting

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>
  );
}