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