javascript - 将事件添加到 react 组件中的视频 html5 标签

Question

我正在开发一个简单的 React 组件来播放视频。它工作正常，现在我想知道视频何时停止，以便我可以隐藏他并开始一些其他事情。我想在代码下面使用“结束”事件，但我不断收到:无法读取未定义的属性“addEventListener”，据我所知，这意味着 html 标签 < strong>introVideo 为 null，但我不知道我做错了什么。

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

Answer 1

默认情况下，video 标记有一个 onEnded 事件监听器，该监听器在视频结束时触发。无需创建引用。

查看工作沙箱: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);