如何使用自定义 videojs 按钮添加属性

Question

我正在努力将数据属性添加到我为音频 js 播放器创建的自定义按钮。它将是文本文件的 bootstrap 可折叠触发器。我想我必须使用 createEl() 函数，但是我无法让它与我的实现一起工作。

我正在尝试为以下内容添加属性：

'data-toggle': 'collapse',
'data-target': '#' + audioID,
'aria-expanded': 'false'**strong text**

感谢您的帮助。

let audioBtnComponent = videojs.getComponent('Button')

let audioTextBtn = videojs.extend(audioBtnComponent, {
    constructor: function () {
        audioBtnComponent.apply(this, arguments)
        this.controlText('Toggle text for audio player')
        // this.createEl({}, {}, { 'class': 'Fudge' })
   },
   handleClick: function () {
    accordionElem[i].classList.toggle('audio-text-open')
    audioList[i].closest('.video-js').classList.toggle('audio-text-open')
   },
   buildCSSClass: function () {
       return 'accordion-trigger audio-text-accordion-trigger collapsed'
   },
   //createEl: function (type, properties, attributes) {
     //  return('button', {}, {'data-toggle': 'collapes'})
    //}
})

videojs.registerComponent('audioTextBtn', audioTextBtn)

let audioPlayer = videojs(audioList[i])
audioPlayer.getChild('controlBar').addChild('audioTextBtn', {})

Answer 1

createEl() 应该 return 一个元素

createEl: function () {
  return audioBtnComponent.prototype.createEl.call(this, 'button', {}, {'data-toggle': 'collapes'});
}

如何使用自定义 videojs 按钮添加属性

How to add attributes with custom videojs Button

video.js