Reactjs Html5 Video - How Do You Catch Video's Controls On Click

I need to do various actions depending if the user clicked on the play / pause controls or if he wants to select a specific moment of the video. So far I've done that: constructor(

Solution 1:

Using react you can use any of the 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>
  );
}

Solution 2:

I would simply wrap video within a div on catch onClick on wrap.

constructor(props) {
    super(props);

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

render() {
  return (
    <divonClick={this.testClick}><videoref={(video1) => { this.video1 = video1; }} width="100%" height="350"controls>
        <sourcesrc={this.state.videoUrl}type="video/mp4" /></video></div>
  );
}