When using videojs, I have the ability to include a Text Track event handler, however, there is currently no option to remove it

I implemented a listener for the 'cuechange' event on a Text Track and it's functioning correctly. However, I am unable to figure out how to remove this listener. I have attempted the instructions below to remove the listener, but it continues to be invoked.

onHiliteSpeech() {
  const textTrack = this.videojsComponent.getTextTrack();

  const handleCueChange = () => {
   ...
   console.log("in event handler");
   }
  };

  if (this.bevents) {
    textTrack.addEventListener('cuechange', handleCueChange);
  } else {

    // None of the following instructions successfully remove the listener.
    textTrack.removeEventListener('cuechange', handleCueChange);
    // textTrack.removeAllListeners();
    // textTrack.removeAllListeners('cuechange');
    // textTrack.eventListeners = null;
  }
}

Within my videojsComponent:

getTextTrack(): TextTrack {
  return this.player.textTracks()[0];
}

Answer №1

After troubleshooting, I identified the issue. It turned out that the function "handleCueChange" should not have been nested within onHiliteSpeech.

To resolve this, I moved handleCueChange outside of onHiliteSpeech. This required some adjustments to enable handleCueChange to access certain OnHiliteSpeech properties. The updated code now looks like this:

const handleCueChange = () => {
   ...
   console.log("in event handler");
};

onHiliteSpeech() {

  textTrack.addEventListener('cuechange', this.handleCueChange);
  ...
  textTrack.removeEventListener('cuechange', this.handleCueChange);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Moving ThreeJS model during animation (Retrieving model's position without callback function)

I'm in the process of creating a model that showcases the International Space Station orbiting around the Earth using threeJS. Everything is working perfectly except for updating the position of the ISS model. Currently, I have a sphere that orbits th ...

Why is my "npm install" pulling in unnecessary libraries that I didn't even mention?

I've listed my dependencies in package.json as follows: { "cookie-parser": "~1.0.1", "body-parser": "~1.0.0", "express": "~3.5.0", "socket.io":"1.0", "mongodb":"2.2.21", "request":"2.79.0", "q":"1.4.1", "bcryptjs":"2.4.0", "jsonw ...

What is the proper method for running a script using the Selenium JavascriptExecutor?

On my test.html page, I've included the following code snippet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </head> <body> ...

The issue of the marker vanishing upon refreshing the page on AngularJS

Currently, I am encountering a rather peculiar issue. Upon the initial page load, the code snippet below correctly displays a marker at the specified coordinates and ensures the map is properly centered: <div class="paddingtop"> <map data-ng- ...

Encountering an ENOENT error while attempting to incorporate a style guide into next.js (react)

Recently, I delved into learning next.js and decided to enhance my project with documentation using To kickstart my project, I utilized npx create-next-app After installation and configuration setup, I added the following code snippet: [styleguide.config ...

Mars Eclipse, AngularJS and the power of NodeJS

Could you please assist me in understanding the workings of node.js and angular.js within Eclipse? I am using Eclipse Mars and I would like to run my Angularjs project on a local server (localhost:8080) but I am unsure of how to accomplish this. I have a ...

How can I use ReactJS to find the nearest five locations in order from closest to farthest?

I'm in the process of creating a website for searching nearby locations. I am facing an issue where I want to display the 5 closest locations from my current location in ascending order, but I keep getting the same location result. I need these locati ...

Unable to save the current light/dark mode preference to local storage

Being a beginner in JavaScript, I am currently working on implementing a simple light mode button for my website which defaults to dark mode. The transition between JS/CSS dark and light modes is seamless, giving the site an appealing look when switching t ...

How can I employ CSS files within a Node module that is compatible with Next?

I recently made the switch from Gatsby to Next and I'm still learning the ropes. When working with Gatsby, I had a Node module that served as my UI library across different projects. This module utilized a CSS module file (style.module.css) that coul ...

What is the best way to showcase a photo selected using an HTML input within a div container?

My goal is to select a photo from a folder and display it on a webpage, but I have struggled to find a working solution. Can this be achieved using just basic HTML, CSS, and JS? I am new to web development, so please forgive me for any beginner questions. ...

What is the best way to reset state in a React component when a key is pressed down while typing in an input

I am struggling with handling input submission in a React component when the Enter key is pressed. My component is built using components from material-ui. In the onKeyDown event handler, I try to clear the state by setting the only field in the componen ...

Stream of information that triggers a specific action based on a specified condition

I'm dealing with an observable stream where I need to make two calls after retrieving the initial object using two id's found within the object. One of these id's, siteId, is optional and may or may not be present. If it is present, I need t ...

Receiving information within an Angular Component (Profile page)

I am currently developing a MEAN Stack application and have successfully implemented authentication and authorization using jWt. Everything is working smoothly, but I am encountering an issue with retrieving user data in the Profile page component. Here ar ...

Having trouble with adding data from an array of objects to an HTML element using jQuery's each method

I am currently facing an issue with looping through an array of objects using $.each in jQuery and trying to append the values to an <li>. Here is the relevant jQuery code: $(".sidebar").empty().append("<div>" + "<h5>Student Info</ ...

Navigating race conditions within Node.js++]= can be challenging, but there are strategies

In the process of developing a MERN full stack application, I encountered a scenario where the frontend initiates an api call to "/createDeckOfCards" on my NodeJS backend. The main objective is to generate a new deck of cards upon clicking a button and the ...

File download is initiated through an Ajax response

Utilizing Polymer's iron-ajax element, I am making an XMLHTTPRequest to a server endpoint: <iron-ajax id="ajax" method="POST" url="/export/" params='' handle-as="json" on-response="handleResponse" </iron-ajax> The resp ...

Enhance your bookmarking experience with Vue mixins that allow you to easily customize the color

Looking for a way to efficiently bookmark pages in my application, I have successfully implemented a feature where I can add pages by their name and URL into bookmarks. Upon clicking the bookmark button, it changes color to indicate that the page has been ...

What is the alternative way to achieve this functionality in Javascript without relying on jQuery?

I am encountering some dependencies issues with jQuery that are preventing me from using it. However, I still need to find a way to make this work without relying on jQuery libraries. Do you have any suggestions on how to achieve this? $(document).ready ...

Looping through items using ng-repeat according to the chosen option in a select dropdown

After expanding my project, I encountered an issue with the main object structure: { screens: [{ id: 0, name: 'Screen0', sections: [{ id: 0, sectionItems: [] }, { id: 1, sectionItems: [] }, { i ...

The error message "TypeError: Cannot read property 'map' of undefined when trying to set state as an array"

Encountering an error while trying to map the state for my posts:[] object: Error message: TypeError: this.state.posts.map is not a function While searching for a solution, I found something similar on this link, but unfortunately, it did not solve the ...