VideoJS响应式模式下如何向controlBar添加可正常点击的自定义按钮

问题表现 #

基于VideoJS搭建视频播放器时，向controlBar添加的自定义按钮在桌面端运行正常，但在移动端、平板端调试时，按钮无法正常触发点击，仅强制操作才可响应。
原问题代码：

let myButton = player?.controlBar.addChild('button');
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;
buttonDom.onclick = function () {
    dispatch();
};

失效原因 #

• 直接给DOM节点绑定原生onclick事件，会和VideoJS内置的移动端触摸事件拦截逻辑冲突：移动端VideoJS优先响应touchstart/touchend事件，默认会吞掉冒泡到播放器容器的原生click事件
• 直接重写按钮innerHTML插入SVG的操作，破坏了VideoJS按钮组件原有的DOM层级结构，导致移动端触摸命中判定异常
• 部分移动端浏览器默认的300ms点击延迟、播放器上层透明遮罩拦截，也会导致点击事件无法落到按钮上

修复方案 #

• 优先使用VideoJS组件自带的事件绑定方法，同时监听click和touchend事件，触发时阻止事件冒泡避免被播放器全局逻辑拦截
• 按钮初始化时直接传入配置项注入SVG内容，不要后续手动修改DOM的innerHTML破坏原有结构
• 给自定义按钮添加适配移动端的CSS属性，保证触摸区域可正常命中

修复后代码 #

// 初始化自定义按钮，直接传入配置项
const myButton = player?.controlBar.addChild('button', {
  controlText: 'Paramétres (o)',
  innerHTML: SVG.SETTING_SVG
});
// 给自定义按钮加专属类，方便样式控制
myButton.addClass('vjs-custom-button');
// 插入到全屏切换按钮前方
player?.controlBar
  .el()
  .insertBefore(myButton.el(), player?.controlBar.getChild('fullscreenToggle').el());

// 绑定兼容多端的触发事件
myButton.on(['click', 'touchend'], function(e) {
  e.stopPropagation();
  e.preventDefault();
  dispatch();
});

配套适配CSS #

.video-js .vjs-control-bar .vjs-custom-button {
  /* 保证按钮层级足够高，不被透明元素遮挡 */
  z-index: 10;
  /* 移除移动端300ms点击延迟，禁止浏览器默认触摸行为拦截 */
  touch-action: manipulation;
  /* 保证触摸区域符合移动端交互规范，最小48px点击范围 */
  min-width: 48px;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

内容的提问来源于stack exchange，提问作者Wafa Bergaoui