本文介绍了如何使用 Video.js 在响应式模式下向控制栏添加自定义按钮。重点讲解了 clickHandler 选项的使用，以确保按钮在移动设备和桌面设备上都能正常响应点击和触摸事件。通过本文，你将学会如何在 Video.js 播放器中灵活地添加自定义功能。
在 Video.js 播放器中添加自定义按钮是扩展播放器功能的一种常见需求。 然而，在响应式模式下，简单的 onclick 事件可能无法在移动设备上正常工作，因为触摸事件的处理方式与鼠标点击事件不同。为了解决这个问题，Video.js 提供了 clickHandler 选项，它可以同时处理点击和触摸事件，从而确保按钮在所有设备上都能正常工作。
使用 clickHandler 选项添加自定义按钮
以下代码展示了如何使用 clickHandler 选项向 Video.js 控制栏添加自定义按钮：
let myButton = player?.controlBar.addChild('button', {
clickHandler: function () {
// 在这里编写按钮点击后的逻辑
dispatch();
}
});
myButton.controlText('Paramétres (o)'); // 设置按钮的提示文本
player?.controlBar
.el()
.insertBefore(myButton.el(), player?.controlBar.getChild('fullscreenToggle').el()); // 将按钮插入到控制栏中，位于全屏按钮之前
let buttonDom = myButton.el();
buttonDom.innerHTML = SVG.SETTING_SVG; // 设置按钮的 HTML 内容，可以使用 SVG 图标代码解释：
启山智软物流配送系统
下载
启山智软物流配送是基于Spring Cloud 和 Vue.js的JAVA物流配送系统。包含总控制后台 、城市合伙人(商家pc端)、 区域团长后台 、用户端小程序 、手机H5等多个操作模块。为响应用户需求我们新增了后台自定义装修组件模块，使页面更加美观，操作更加灵活简便。淘宝商品CSV一键导入，提升用户使用感。还有与众不同的管理台侧边栏设计，打破传统管理台样式。 另有公众号接龙、引导页上传、区域团
- player?.controlBar.addChild('button', { clickHandler: ... }): 这行代码使用 addChild 方法向控制栏添加一个新的按钮组件。第二个参数是一个配置对象，其中 clickHandler 属性指定了一个函数，该函数将在按钮被点击或触摸时执行。
- clickHandler: function () { ... }: clickHandler 属性的值是一个函数，这个函数定义了按钮被点击或触摸时要执行的操作。在这个例子中，它调用了 dispatch() 函数。你需要将 dispatch() 替换为你实际需要执行的逻辑。
- myButton.controlText('Paramétres (o)'): 这行代码设置了按钮的提示文本，当鼠标悬停在按钮上时，会显示该文本。
- player?.controlBar.el().insertBefore(...): 这行代码将新创建的按钮插入到控制栏中。 insertBefore 方法允许你指定按钮插入的位置。在这个例子中，按钮被插入到全屏切换按钮之前。
- buttonDom.innerHTML = SVG.SETTING_SVG: 这行代码设置了按钮的 HTML 内容。 使用 SVG 图标可以使按钮在不同分辨率的屏幕上看起来更清晰。
注意事项：
- 确保 dispatch() 函数已定义，并且包含你希望在按钮点击后执行的逻辑。
- 可以根据需要修改 insertBefore 方法的第二个参数，以将按钮插入到控制栏的不同位置。
- 可以使用 CSS 来自定义按钮的样式。
- 建议使用 SVG 图标作为按钮的内容，以确保在不同设备上都能获得最佳的视觉效果。
总结：
通过使用 clickHandler 选项，可以轻松地向 Video.js 控制栏添加自定义按钮，并确保按钮在响应式模式下也能正常工作。 这种方法可以让你在 Video.js 播放器中灵活地添加自定义功能，从而满足各种不同的需求。
