在Video.js中，向控制栏添加自定义按钮是常见的需求，例如添加设置、分享等功能。然而，在响应式布局下，直接使用onclick事件可能会导致在移动设备上按钮无法正常响应。本文将介绍如何使用Video.js提供的clickHandler选项，确保自定义按钮在所有设备上都能正常工作。
使用clickHandler选项添加自定义按钮
Video.js的组件系统提供了一个clickHandler选项，用于处理组件的点击和触摸事件。通过使用这个选项，可以避免直接操作DOM元素，从而确保按钮在各种设备上都能正常响应。
以下是一个使用clickHandler选项添加自定义按钮的示例代码：
let myButton = player?.controlBar.addChild('button', {
clickHandler: function () {
dispatch(); // 你的按钮点击事件处理函数
}
});
myButton.controlText('Paramètres (o)'); // 设置按钮的文本提示
// 获取按钮的DOM元素并设置其内容（例如SVG图标）
let buttonDom = myButton.el();
buttonDom.innerHTML = SVG.SETTING_SVG;
// 将按钮插入到控制栏的指定位置（例如在全屏按钮之前）
player?.controlBar
.el()
.insertBefore(buttonDom, player?.controlBar.getChild('fullscreenToggle').el());代码解释：
- player?.controlBar.addChild('button', { clickHandler: ... }): 这行代码使用addChild方法向控制栏添加一个新的按钮组件。第一个参数是组件的类型（这里是'button'），第二个参数是一个配置对象，其中包含了clickHandler选项。
- clickHandler: function () { dispatch(); }: clickHandler选项的值是一个函数，这个函数会在按钮被点击或触摸时执行。在这个例子中，它调用了dispatch()函数，这个函数应该包含你的按钮点击事件处理逻辑。
- myButton.controlText('Paramètres (o)'): 这行代码设置了按钮的文本提示，当鼠标悬停在按钮上时，会显示这个提示信息。
- buttonDom.innerHTML = SVG.SETTING_SVG: 这行代码设置按钮的内容。通常，你会使用SVG图标来美化按钮。SVG.SETTING_SVG应该是一个包含SVG代码的字符串变量。
- player?.controlBar.el().insertBefore(...): 这行代码将按钮插入到控制栏的指定位置。insertBefore方法接受两个参数：要插入的元素和参考元素。在这个例子中，我们将按钮插入到全屏按钮之前。
注意事项：
- 确保dispatch()函数能够正确处理按钮的点击事件。
- 使用SVG图标可以提高按钮在不同设备上的显示效果。
- 根据需要调整按钮在控制栏中的位置。
- 在Video.js初始化完成后再添加自定义按钮，否则可能会出现错误。
总结：
通过使用Video.js的clickHandler选项，可以轻松地向控制栏添加自定义按钮，并确保它们在桌面和移动设备上都能正常工作。这种方法避免了直接操作DOM元素，从而提高了代码的可维护性和可靠性。希望本文能够帮助你更好地使用Video.js。
