Question

由于React使用生命周期方法和虚拟dom，我如何检测我的视频何时播放完毕。我在stackoverflow上发现了另一个建议使用componentWillUnmount的问题，但是没有必要从dom中删除视频，因此componentWillUnmount不会被解雇......

如何检测视频播放完毕后的反应？

Answer 1

使用ref callback获取<video DOM元素在安装时的引用。

<video ref={el => this.videoElement = el}></video>

将其与componentDidMount()结合使用，为视频元素添加事件监听器。 ended event是您正在寻找的内容。

播放或流式播放停止时会触发已结束的事件因为已达到媒体的结尾或因为没有其他数据可用。

componentDidMount() {
    this.videoElement.addEventListener("ended", myCallback);
}

请记住在组件卸载时删除事件侦听器，否则您将在不再存在的元素上留下悬空事件侦听器！

componentWillUnmount() {
    this.videoElement.removeEventListener("ended", myCallback);
}

Answer 2

您还可以在视频元素上使用onEnded媒体事件。自2015年以来已支持此功能；它使用起来更容易，并且可以在功能组件中使用。

const myCallback = () => (console.log('Video has ended'));
    <video autoplay onEnded={() => myCallback()}>
        <source src={'https://somerandomvideo.url'} type="video/mp4" />
    </video>

还要确保视频元素上的loop不是true，因为那样，onEnded事件将永远不会触发。

更多信息在这里： https://reactjs.org/blog/2015/09/10/react-v0.14-rc1.html

如何检测视频播放完成时的反应？

2 个答案: