VideoJS无法将自定义组件添加至ModalDialog实现up-next弹窗怎么解决

问题原因 #

video.js 的 ModalDialog 组件默认渲染逻辑是：如果初始化时没有显式传入 content 配置，会用空内容覆盖 contentEl 下的所有子元素，你通过 addChild 添加的子组件会被默认清空逻辑删掉，所以 content() 返回为空，DOM 上也看不到内容。
而你后续直接复制 innerHTML 的方式只迁移了DOM结构，原来绑定在video.js组件实例上的点击事件是挂载在原DOM元素上的，新生成的DOM和原组件无关联，自然触发不了事件。
另外你代码里存在笔误：定义的点击回调函数是goNext，绑定的时候写的是goForward，也会导致点击无响应。

修复方案 #

方案1：初始化时直接传入content配置（推荐） #

直接把你创建的按钮组件的原生DOM元素作为content参数传入Modal初始化配置，既保留组件事件，又能正常渲染：

// create next button component
const _getForwardBtn = (player) => {
  const customForwardBtn = _createVjsComponent(player, 'forwardButton')
  customForwardBtn.el().innerHTML = `<button>Go Forward</button>`
  const goNext = () => {
    alert('forward button clicked')
  }
  // 修复笔误：把goForward改成goNext
  customForwardBtn.on('click', goNext)
  return customForwardBtn
}
const forwardBtn = _getForwardBtn(player)

const ModalDialog = videojs.getComponent('ModalDialog')
const modal = new ModalDialog(player, {
  name: 'upNextModal',
  // 直接传入按钮的原生DOM作为content
  content: forwardBtn.el()
})

player.addChild(modal)

// 验证
console.log(modal.content()) // 会返回按钮的DOM元素，不再为空

方案2：开启fill配置保留addChild的内容 #

如果你需要给Modal添加多个子组件，想要沿用addChild的写法，只要在初始化时加fill: true配置，告诉Modal不要清空contentEl下的子元素即可：

const forwardBtn = _getForwardBtn(player)

const ModalDialog = videojs.getComponent('ModalDialog')
const modal = new ModalDialog(player, {
  name: 'upNextModal',
  // 关键配置：保留contentEl下的子元素，不被默认空内容覆盖
  fill: true
})

modal.addChild(forwardBtn)
player.addChild(modal)

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