Reactjs video onEnded event not firing

Question

I have created a react component to play videos. The component is playing video just fine but the callback is not being fired.

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

The onEnded function is not being called. What am I doing wrong.

singh1469 · Accepted Answer · 2015-10-27 08:42:37Z

25

ReactJS (0.14.0-rc1) now supports media events (video and audio): https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html

I've tested onEnded and onTimeUpdate - works great!

edited Oct 27, 2015 at 8:42

answered Oct 26, 2015 at 8:56

singh1469

2,04423 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cole Over a year ago

Do you have an example of this? Possibly using hooks?

Gaylord.P Over a year ago

Hello ; +1, do you have example ? Thanks

MarvinVK · Accepted Answer · 2022-06-02 21:22:16Z

6

Small tip for the next person that has the same problem as I did onEnded was not triggering because I had the loop attribute as well.

In my case I already had it on loop and then there is a play button. So I ended up with this:

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>

edited Jun 2, 2022 at 21:22

answered May 31, 2022 at 15:45

MarvinVK

3,0831 gold badge25 silver badges23 bronze badges

Collectives™ on Stack Overflow

Reactjs video onEnded event not firing

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related