I added a handler for the 'cuechange' event to a Text Track" This works fine. But I can not find a way to remove this handler. I tried each of instructions below to remove the handler, but it still gets called.
onHiliteSpeech() {
const textTrack = this.videojsComponent.getTextTrack();
const handleCueChange = () => {
...
console.log(in event handler);
}
};
if (this.bevents) {
textTrack.addEventListener('cuechange', handleCueChange);
} else {
// none of the below instructions remove the handler.
textTrack.removeEventListener('cuechange', handleCueChange);
// textTrack.removeAllListeners();
// textTrack.removeAllListeners('cuechange');
// textTrack.eventListeners = null;
}
}
In my videojsComponent:
getTextTrack(): TextTrack {
return this.player.textTracks()[0];
}
After some trial and error, I found the problem. The function "handleCueChange" should not be a nested function within onHiliteSpeech.
I moved handleCueChange outside of onHiliteSpeech. (This also involved some work to allow handleCueChange to access some OnHiliteSpeech properties.) The new working code became:
const handleCueChange = () => {
...
console.log(in event handler);
}
};
onHiliteSpeech() {
textTrack.addEventListener('cuechange', this.handleCueChange);
...
textTrack.removeEventListener('cuechange', this.handleCueChange);
}