Javascript 如何将Video.js按钮合并为一个按钮

是否仍然可以将video.js选项按钮合并/组合为一个选项按钮

分组按钮（质量选择器/音频选择器/字幕选择器）：

进入一个组按钮（如下所示）：

您可以使用文档中的

菜单（播放器，选项选择）

类-

菜单组件用于构建弹出菜单，包括字幕和字幕选择菜单

您可以构建自己的弹出菜单，并向其中添加其他按钮

检查这把小提琴-

它使用菜单类来创建一个质量菜单，并为多个质量添加了选项，您可以使用相同的东西，而不是质量，您将添加控件

var VideoJsButtonClass = videojs.getComponent('MenuButton');
var VideoJsMenuClass = videojs.getComponent('Menu');
var VideoJsComponent = videojs.getComponent('Component');
var VideoJsMenuItemClass = videojs.getComponent('MenuItem');
var Dom = videojs.dom;

/**
 * Extend vjs button class for quality button.
 */
var QualityMenu = function (_VideoJsButtonClass) {
    inherits(QualityMenu, _VideoJsButtonClass);

    /**
     * Button constructor.
     *
     * @param {Player} player - videojs player instance
     */
    function QualityMenu(player) {
        classCallCheck(this, QualityMenu);
        return possibleConstructorReturn(this, _VideoJsButtonClass.call(this, player, {}));
    }

    /**
     * Creates button items.
     *
     * @return {Array} - Button items
     */
    QualityMenu.prototype.createItems = function createItems() {
        return [];
    };

    /**
     * Create the menu and add all items to it.
     *
     * @return {Menu}
     *         The constructed menu
     */
    QualityMenu.prototype.createMenu = function createMenu() {
        var menu = new VideoJsMenuClass(this.player_, { menuButton: this });

        this.hideThreshold_ = 0;

        this.items = this.createItems();

        if (this.items) {
            // Add menu items to the menu
            for (var i = 0; i < this.items.length; i++) {
                menu.addItem(this.items[i]);
            }
        }

        return menu;
    };

    return QualityMenu;
}(VideoJsButtonClass);

var QualityMenuItem = function (_VideoJsMenuItemClass) {
    inherits(QualityMenuItem, _VideoJsMenuItemClass);

    /**
     * Menu item constructor.
     *
     * @param {Player} player - vjs player
     * @param {Object} item - Item object
     * @param {QualityMenu} qualityMenu - The containing button.
     * @param {HlsQualitySelectorPlugin} plugin - This plugin instance.
     */
    function QualityMenuItem(player, item, qualityMenu, plugin) {
        classCallCheck(this, QualityMenuItem);

        var _this = possibleConstructorReturn(this, _VideoJsMenuItemClass.call(this, player, {
            label: item.label,
            selectable: true,
            selected: item.selected || false
        }));

        _this.item = item;
        _this.qualityMenu = qualityMenu;
        _this.plugin = plugin;
        return _this;
    }

    /**
     * Click event for menu item.
     */
    QualityMenuItem.prototype.handleClick = function handleClick() {
        // Reset other menu items selected status.
        for (var i = 0; i < this.qualityMenu.items.length; ++i) {
            this.qualityMenu.items[i].selected(false);
        }
        
        // Set this menu item to selected, and set quality.
        this.plugin.setQuality(this.item);
        this.selected(true);
    };

    return QualityMenuItem;
}(VideoJsMenuItemClass);


var QualitySelectorPlugin = function () {
    function QualitySelectorPlugin(player, options) {
        this.player = player;
        this.qualityParams = this.getQualityParams(player.el().dataset.qualityParams);

        if (this.qualityParams.length > 0) {
            this.createQualityMenu();
            this.onAddQualityLevel();
        }
    }

    QualitySelectorPlugin.prototype.getQualityParams = function getQualityParams(qualityParams) { 
        qualityParams = [
            {quality: -1, level: -1, label: 'Auto'},
            {quality: 234, level: 0, label: '234p'},
            {quality: 360, level: 1, label: '360p'},
            {quality: 540, level: 2, label: '540p'},
            {quality: 720, level: 3, label: '720p'},
            {quality: 1080, level: 4, label: '1080p'},
        ];
        if (!(qualityParams.length > 0)) {
            return [];
        }

        qualityParams.sort(function (current, next) {
            if (current.quality < next.quality) {
                return -1;
            }
            if (current.quality > next.quality) {
                return 1;
            }
            return 0;
        });

        return qualityParams; 
    };

    QualitySelectorPlugin.prototype.createQualityMenu = function createQualityMenu() {
        var player = this.player;

        this._qualityMenu = new QualityMenu(player);
        
        var placementIndex = player.controlBar.children().length - 2;
        var qualityMenuInstance = player.controlBar.addChild(this._qualityMenu, { componentClass: 'qualitySelector' }, placementIndex);

        qualityMenuInstance.addClass('vjs-quality-selector');
        qualityMenuInstance.menuButton_.$('.vjs-icon-placeholder').className += ' vjs-icon-quality';
        qualityMenuInstance.removeClass('vjs-hidden');
    };

    QualitySelectorPlugin.prototype.getQualityMenuItem = function getQualityMenuItem(item) {
        var player = this.player;

        return new QualityMenuItem(player, item, this._qualityMenu, this);
    };

    QualitySelectorPlugin.prototype.onAddQualityLevel = function onAddQualityLevel() {
        var _this = this;

        var player = this.player;
        var levels = this.qualityParams;
        var levelItems = [];

        var _loop = function _loop(i) {
            if (!levelItems.filter(function (_existingItem) {
                return _existingItem.item && _existingItem.item.level === levels[i].level;
            }).length) {
                var levelItem = _this.getQualityMenuItem.call(_this, {
                    label: levels[i].label,
                    level: levels[i].level,
                    quality: levels[i].quality,
                    selected: levels[i].level == -1 || false
                });

                levelItems.push(levelItem);
            }
        };

        for (var i = 0; i < levels.length; ++i) {
            _loop(i);
        }

        if (this._qualityMenu) {
            this._qualityMenu.createItems = function () {
                return levelItems;
            };
            this._qualityMenu.update();
        }
    };
    
    QualitySelectorPlugin.prototype.getHls = function getHls() {
        return this.player.tech({ IWillNotUseThisInPlugins: true }).hls;
    };

    QualitySelectorPlugin.prototype.setQuality = function setQuality(qualityItem) {
        var player = this.player;
        this.getHls().representations().forEach(function(rep) {
           rep.enabled(rep.height === qualityItem.quality || qualityItem.quality === -1);
        });

        this._qualityMenu.unpressButton();
    };

    return QualitySelectorPlugin;
}();

/**
 * Function to invoke when the player is ready.
 *
 * This is a great place for your plugin to initialize itself. When this
 * function is called, the player will have its DOM and child components
 * in place.
 *
 * @function onPlayerReady
 * @param    {Player} player
 *           A Video.js player object.
 *
 * @param    {Object} [options={}]
 *           A plain object containing options for the plugin.
 */

var onPlayerReady = function onPlayerReady(player, options) {
        player.addClass('vjs-quality-selector');
        player.qualitySelector = new QualitySelectorPlugin(player, options);
};

/**
 * A video.js plugin.
 *
 * In the plugin function, the value of `this` is a video.js `Player`
 * instance. You cannot rely on the player being in a "ready" state here,
 * depending on how the plugin is invoked. This may or may not be important
 * to you; if not, remove the wait for "ready"!
 *
 * @function qualitySelector
 * @param    {Object} [options={}]
 *           An object of options left to the plugin author to define.
 */


var qualitySelector = function qualitySelector(options) {
    var _this = this;

    this.ready(function () {
    onPlayerReady(_this, videojs.mergeOptions(defaults, options));
    });
}; // Register the plugin with video.js.

registerPlugin('qualitySelector', qualitySelector); // Include the version number.

qualitySelector.VERSION = version;

return qualitySelector;

 }));

var VideoJsButtonClass=videojs.getComponent（'MenuButton'）；
var VideoJsMenuClass=videojs.getComponent（'Menu'）；
var VideoJsComponent=videojs.getComponent（'Component'）；
var VideoJsMenuItemClass=videojs.getComponent（'MenuItem'）；
var Dom=videojs.Dom；
/**
*为quality button扩展vjs button类。
*/
var QualityMenu=函数（\u VideoJsButtonClass）{
继承（QualityMenu，\u VideoJsButtonClass）；
/**
*按钮构造函数。
*
*@param{Player}Player-videojs播放器实例
*/
功能质量菜单（播放器）{
classCallCheck（这是QualityMenu）；
返回possibleConstructorReturn（this，\u VideoJsButtonClass.call（this，player，{}））；
}
/**
*创建按钮项。
*
*@return{Array}-按钮项
*/
QualityMenu.prototype.createItems=函数createItems（）{
返回[]；
};
/**
*创建菜单并向其中添加所有项目。
*
*@return{Menu}
*构造菜单
*/
QualityMenu.prototype.createMenu=函数createMenu（）{
var menu=newvideojsmenuclass（this.player_，{menuButton:this}）；
this.hideThreshold=0；
this.items=this.createItems（）；
如果（本项目）{
//向菜单中添加菜单项
对于（var i=0；i0）{
这个.createQualityMenu（）；
这个.onAddQualityLevel（）；
}
}
QualitySelectorPlugin.prototype.getQualityParams=函数getQualityParams（qualityParams）{
qualityParams=[
{质量：-1，级别：-1，标签：'Auto'}，
{质量：234，级别：0，标签：'234p'}，
{质量：360，级别：1，标签：'360p'}，
{质量：540，级别：2，标签：'540p'}，
{质量：720，级别：3，标签：'720p'}，
{质量：1080，级别：4，标签：'1080p'}，
];
如果（！（qualityParams.length>0））{
返回[]；
}
qualityParams.sort（函数（当前、下一个）{
if（当前质量<下一个质量）{
返回-1；
}
如果（当前质量>下一个质量）{
返回1；
}
返回0；
});
返回质量参数；
};
QualitySelectorPlugin.prototype.createQualityMenu=函数createQualityMenu（）{
var player=this.player；
这个。_qualitymen=新的qualitymen（玩家）；
var placementIndex=player.controlBar.children（）.length-2；
var qualityMenuInstance=player.controlBar.addChild（this.\u qualityMenu，{componentClass:'qualitySelector'}，placementIndex）；
addClass（'vjs-quality-selector'）；
qualityMenuInstance.menuButton_.$（'.vjs图标占位符'）。className+='vjs图标质量'；
removeClass（'vjs-hidden'）；
};
QualitySelectorPlugin.prototype.getQualityMenuItem=函数getQualityMenuItem（项）{
var player=this.player；
返回新的QualityMenuItem（玩家，物品，此._QualityMenus，此）；
};
QualitySelectorPlugin.prototype.onAddQualityLevel=函数onAddQualityLevel（）{
var_this=这个；
var player=this.player；
var levels=this.qualityParams；
var levelItems=[]；
var _loop=函数_loop（i）{
if（！levelItems.filter）（函数（_existingItem）{
return\u existingItem.item&&u existingItem.item.level==levels[i].lev