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

Question

有没有把merge/groupvideo.js选项按钮合并成一个选项按钮？

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

成一组按钮（像这样）：

Answer 1

您可以使用文档中的 Menu(player, optionsopt) class - https://docs.videojs.com/menu#addChild

The Menu component is used to build popup menus, including subtitle and captions selection menus.

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

检查这个 fiddle - https://jsfiddle.net/exception777/xsucrz1m/32/

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

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;

 }));

...

另外，我找到了https://www.npmjs.com/package/videojs-group-play包，看看吧，可能就是你要找的。

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

How to merge Video.js buttons into one

javascript

http-live-streaming

video.js