Question

我需要执行各种操作，具体取决于用户是否点击了play / pause控件，或者是否要选择视频的特定时刻。

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

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

所以，如果我点击视频本身，我就打招呼了。但如果我点击控件，没有任何事情发生......

也许我的搜索错了，但到目前为止我在Google上找不到任何内容。

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

Ps：我不想使用任何jQuery。

Answer 1

使用反应，您可以使用media events：

中的任何一个

onAbort onCanPlay onCanPlayTh on onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange oneeked onSeking onStalled onSpendpend 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>
  );
}

Answer 2

我只需将video包裹在div的{{1}}包裹内。

onClick

ReactJS html5视频 - 如何在点击时捕捉视频的控件

2 个答案: