擴展video.js中的進度控制，重複進度條

Question

我在擴展progressControl對象時遇到了問題，它也克隆了滑塊，所以目前有兩個。試圖通過擴展progressControl來解決這個問題，或者我應該以不同的方式創建元素嗎？

this.player = videojs("id", videojsOptions); 
var thePlayer = this.player; 

videojs.TrimVideo = videojs.ProgressControl.extend({ 
    init: function(player, options){ 
     videojs.ProgressControl.call(this, player, options); 
    } 
}); 

this.player.controlBar.progressControl.trimVideo = this.player.controlBar.progressControl.addChild(
    new videojs.TrimVideo(thePlayer, { 
     el: videojs.Component.prototype.createEl(null, { 
      className: 'vjs-trim-start-button vjs-menu-button', 
      innerHTML: '<div style="">words and words</div>', 
      role: 'button' 
     }) 
    }) 
); 

Link to Progress Control documentation

Have created a jsfiddle that replicates the behaviour

Answer 1

當初始化一個新progressControl它融合了孩子在一起，你必須明確地設置搜索條爲false。所以你最終會得到類似於

this.player.controlBar.progressControl.trimVideo = this.player.controlBar.progressControl.addChild(
    new videojs.TrimVideo(thePlayer, { 
     el: videojs.Component.prototype.createEl(null, { 
      className: 'vjs-trim-start-button vjs-menu-button', 
      innerHTML: '<div style="">words and words</div>', 
      role: 'button' 
     }), 
     seekBar: false, // either this 
     children: {seekBar: false} // or this 
    }) 
);