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

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

Answer 2

我会简化在包装上捕获onClick时，将中的video包裹在内。

constructor(props) { 
 
    super(props); 
 

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

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