ReactJS html5 视频 - 你如何在点击时捕捉视频的控件 [英] ReactJS html5 video - how do you catch video's controls on click

问题描述

我需要根据用户是点击 play/pause 控件还是想要选择视频的特定时刻来执行各种操作.

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

所以，在这里，如果我点击视频本身，我会打印你好.但是如果我点击控件，什么也没有发生......

So, here if I click on the video itself I've the hello printing. But if I click on the controls, nothing happen...

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

Maybe I'm searching it wrong but I couldn't find anything on google so far.

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

How can I know if the user clicked on play / pause or select a time frame of the video? Do I need absolutely a library like: http://docs.videojs.com/index.html ?

Ps:我不想使用任何 jQuery.

Ps: I don't want to use any jQuery.

推荐答案

使用 react，您可以使用任何 媒体事件:

Using react you can use any of the media events:

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncryptedonEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlayonPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspendonTimeUpdate onVolumeChange onWaiting

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

这篇关于ReactJS html5 视频 - 你如何在点击时捕捉视频的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！