如何从 controlBar 组件中移除两个自定义按钮

Question

我添加了两个自定义按钮（用于自定义章节导航），稍后在我的代码中我想 delete/hide 它们。但是使用 removeChild() 仅删除两者之一（即使执行两次）

添加它们效果很好，但它确实是我遇到麻烦的地方。

这是我试过的方法，但我无法同时删除两者

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

而且我不能声明 "button" 和 "button2" 来区分它们，否则我会收到以下错误，因为它不是 videojs 组件

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)

Answer 1

您已经拥有删除按钮所需的一切：prevChapButtonDom 和 nextChapButtonDom。删除按钮将是：

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

我创建了一个 Codepen 来显示通过按钮删除元素。请注意，为了简单起见，我使用了 jQuery，但删除按钮元素并不是必需的。

如何从 controlBar 组件中移除两个自定义按钮

How to remove two custom buttons from the controlBar component

javascript

video.js