在 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 时，它将子项合并在一起，您必须明确地将 seekBar 设置为 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
    })
);

在 video.js 中扩展进度控制，重复进度条

Extending progress control in video.js, duplicate progress bars

javascript

video.js