How to remove two custom buttons from the controlBar component

Question

I've added two custom buttons (for custom chapter navigation) and later in my code I want to delete/hide them. But using the removeChild() only remove one of the two (even by doing it twice)

Adding them work great but it's really the removing where I'm getting in troubles.

This is what I've tried but I can't delete both

var nextChapButton = myPlayer.controlBar.addChild("button",{}, 1);
var nextChapButtonDom = nextChapButton.el();
nextChapButtonDom.innerHTML = ">>";

var prevChapButton = myPlayer.controlBar.addChild("button",{}, 0);
var prevChapButtonDom = prevChapButton.el();
prevChapButtonDom.innerHTML = "<<";

myPlayer.controlBar.removeChild("Button");
//even doing it twice the ">>" button remains
myPlayer.controlBar.removeChild("Button");

And I cant declare "button" and "button2" to differenciate them or I get the following error because it's not videojs a component

Uncaught Error: Component Button2 does not exist
    at ControlBar.addChild (video.js:3525)
    at loadVideo (load.js:261)
    at loadPage (load.js:196)
    at startConfig (load.js:171)
    at HTMLButtonElement.onclick (load.html:114)

score 0 · Accepted Answer · answered Jun 24 '19 at 14:59

0

You already had everything you needed to remove the buttons: prevChapButtonDom and nextChapButtonDom. Removing the buttons would be:

nextChapButtonDom.remove();
prevChapButtonDom.remove();

I created a Codepen to show removing the elements via button. Please note I used jQuery for simplicity but it's not in any way required to remove the button elements.

answered Jun 24 '19 at 14:59

SaschaM78

4,376
4
33
42

@Valoute_GS I wouldn't call it "dumb". I bet you wanted to use the "Component" functionality of video.js and therefore forgot to look for the "standard way" :-) – SaschaM78 Jun 25 '19 at 07:24

How to remove two custom buttons from the controlBar component

1 Answers1