Custom rendition names

[nwang92]

I have some HLS playlists without RESOLUTION set, and when using hls-video element + media-chrome to support rendition selection, I get the following:

I'm guessing this is occurring because each rendition's height is set to 0. Is there a way to override the displayed values here?

[luwes]

yes, this is possible.

      const renditionMenus = document.querySelectorAll('media-rendition-menu');

      for (const renditionMenu of renditionMenus) {
        renditionMenu.formatMenuItemText = (text, rendition) => {
          console.log(text, rendition);
          return text.replace('1080p', '1080p (HD)');
        }
      }

see an example here https://media-chrome.mux.dev/examples/vanilla/control-elements/media-rendition-menu.html