我正在开发一个简单的 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>
);}}
最佳答案
默认情况下,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);
关于javascript - 将事件添加到 react 组件中的视频 html5 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57554132/