search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.21k stars 62 forks source link

Custom rendition names #926

Closed nwang92 closed 3 months ago

nwang92 commented 3 months ago

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

Screenshot 2024-06-20 at 6 48 31 PM

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 commented 3 months ago

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