Reactjs 视频 onEnded 事件未触发

Question

我创建了一个 React 组件来播放视频。该组件正在正常播放视频，但未触发回调。

class VideoPlayer extends React.Component {
  componentWillMount () {
      console.log('Mounting here');
  }

  changeThis () {
    console.log("Ended");
  }

  render () {
    var notice = this.props.notice;
    var p = "./data/video/" + notice.path + '?' + Math.random();
    return (
      <div key={notice.id}>
      <video className="image" alt={notice.description} onEnded={this.changeThis.bind(this)} controls autoPlay>
        <source src={p} type="video/mp4" />
        No suppoty
      </video>
      </div>
    )
  }
}

未调用 onEnded 函数。我做错了什么。

Answer 1

ReactJS (0.14.0-rc1) 现在支持媒体事件（视频和音频）： https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html

我测试了 onEnded 和 onTimeUpdate - 效果很好！

Answer 2

给下一个和我有同样问题的人的小提示 onEnded 没有触发，因为我也有 loop 属性。

在我的例子中，我已经将它循环播放，然后有一个播放按钮。所以我得到了这个：

const handlePlayPress = () => {
  vidRef.current.pause();
  vidRef.current.currentTime = 0;
  vidRef.current.muted = false;
  vidRef.current.loop = false;
  vidRef.current.play();
};

const handleVideoEnded = () => {
  console.log('Video ended!');
};

<video
  ref={vidRef}
  muted
  autoPlay
  loop
  onEnded={handleVideoEnded}>
    <source src="/videos/video.webm" type="video/webm" />
    <source src="/videos/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

Reactjs 视频 onEnded 事件未触发

Reactjs video onEnded event not firing

javascript

html5-video

reactjs