Add event to Video html5 tag in a react component

Question

I'm working on a simple React Component to play video. It works fine, now I'd like to know when the video stops so that I can hide him and start some other things. I'd like to use 'ended' event, below the code, I but I keep getting: Cannot read property 'addEventListener' of undefined which, as far as I understand, means that the html tag introVideo is null but I don't know what I'm doing wrong.

export default class ShowMovieWindow extends React.Component {

constructor(props) {
    super(props);
    this.handleVideoEnd = this.handleVideoEnd.bind(this);
};

handleVideoEnd() {
    console.log("Finished");
}

componentDidMount() {
    this.refs.introVideo.addEventListener("ended", this.handleVideoEnd);
}

render() {
    return (
        <Dialog isOpen={this.props.isOpen}>
            <div className={Classes.DIALOG_BODY}>
                <div>
                    <video ref="introVideo" autoPlay>
                        <source src={'./asset/video/intro.mp4'} type="video/mp4"/>
                    </video>
                </div>
            </div>
        </Dialog>
    );}}

Hi NiBE, please try my solution below and let me know if that helps :) — Cat_Enthusiast
– Cat_Enthusiast, Commented Aug 19, 2019 at 9:56

Cat_Enthusiast · Accepted Answer · 2019-08-19 09:54:48Z

2

The video tag has an onEnded event-listener by default which triggers when the video ends. There's no need to create a ref.

See working sandbox: https://codesandbox.io/s/lingering-sun-qvlmz

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class ShowMovieWindow extends React.Component {
  constructor(props) {
    super(props);
    this.handleVideoEnd = this.handleVideoEnd.bind(this);
  }

  handleVideoEnd() {
    console.log("Finished");
  }

  render() {
    return (
      <div>
        <div>
          <video onEnded={this.handleVideoEnd} controls autoPlay>
            <source
              src="http://techslides.com/demos/sample-videos/small.webm"
              type="video/webm"
            />
          </video>
        </div>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<ShowMovieWindow />, rootElement);

answered Aug 19, 2019 at 9:54

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

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

1 Comment

Cat_Enthusiast Over a year ago

haha no worries. You're very welcome and happy coding @NiBE :)

Collectives™ on Stack Overflow

Add event to Video html5 tag in a react component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related