如何檢測視頻播放完成時的反應？

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