No MenuItem elements in DOM about video.js

[mister-ben]

The reason it didn't work is settingButton.createMenu() will create a new but detached menu DOM. It doesn't return or replace the original one. let settingMenu = settingButton.menu; should work in your original code.

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[amtins]

@rudachenkoev what about something like?

function setupPlayer() {
  if (!this.$refs.videoPlayer) return false;
  this.player = videojs(this.$refs.videoPlayer, this.options, () => {
    let MenuItem = videojs.getComponent('MenuItem');
    let MenuButton = videojs.getComponent('MenuButton');

    MenuButton.prototype.createItems = function (
      options = this.options.scaledFiles
    ) {
      const items = [];

      for (let quality of options) {
        items.push(new MenuItem(this.player(), { label: quality.resolution }));
      }

      return items;
    };

    let settingButton = new MenuButton(this.player);
    settingButton.setIcon('cog');

    this.player.getChild('ControlBar').addChild(settingButton);
  });
}

[rudachenkoev]

@amtins thank you for your reply
your option worked for me, just with a few minor changes
perhaps this will also be useful for someone else

MenuButton.prototype.createItems = function (options = this.options.scaledFiles) { ... } => MenuButton.prototype.createItems = (options = this.options.scaledFiles) => { ... }

items.push(new MenuItem(this.player(), { label: quality.resolution })); => items.push(new MenuItem(this.player, { label: quality.resolution }));

[rudachenkoev]

@mister-ben yeah, it really works, thanks
perhaps you can give some more advice on the "selected" option in MenuItem
I want to highlight one of the options as active, but none of the following options helped me:

1. qualityItem.selected(true)
2. let qualityItem = new MenuItem(this.player, { label: quality.resolution, selected: true })

[rudachenkoev]

figured it out.
To make MenuItem with selectable option you need to add the option selectable: true - new MenuItem(this.player, { label: quality.resolution, selectable: true })
although there is nothing about it in the documentation