How to implement a quality selection control

[debjits1]

I want to implement a quality selection control (with labels like HD, Full HD). Could anyone help me with the same?

[gkatsev]

This is one of the big things that is still missing. We're actively working on having menu-button controls, which currently is available in experimental form, mostly for a captions menu. In addition, we need to figure out exactly what the API for quality levels is. It'll likely be something along these lines but there will be a proposal on that repo soon.

[mskorsur]

I'm also interested in this. Starting a new project, which will use media chrome, and it'd be really good to have this feature to select quality available from HLS manifest. Thanks for the effort and thinking about it.

[luwes]

We released an experimental <media-rendition-selectmenu> component in the latest release!
https://github.com/muxinc/media-chrome/releases/tag/v1.2.0

Have a look at an example here
https://media-chrome.mux.dev/examples/vanilla/control-elements/media-rendition-selectmenu.html

(The component is in the /experimental folder which means the name or functionality could change in a newer version so be sure to double check that when upgrading to versions higher than v1.2.0.)

Experimental components require a separate explicit import.

<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@1.2/+esm"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@1.2/dist/experimental/media-rendition-selectmenu.js/+esm"></script>

See here for a Codesandbox example.
https://codesandbox.io/s/media-chrome-rendition-selectmenu-kp5k2j

---

Media Chrome requires the video element to have a renditions API for which a handy package is here:
https://github.com/muxinc/media-tracks

<hls-video> is one of the custom video elements that has implemented the renditions API.
https://github.com/muxinc/hls-video-element

Let us know what video engine you're using and we might be able to add this for you.

Feedback is very welcome!

[gogocharli]

Media Chrome requires the video element to have a renditions API for which a handy package is here:
https://github.com/muxinc/media-tracks

Is this also supported in @mux/mux-video-react? I seem to run into an issue with it being "unavailable" there while it's all good with the non-react version of the package.
Thanks a ton for all the work that's gone into this.

[mskorsur]

Hello,

Just played a bit with the demo example, thanks for adding this! Love how simple it is to use. We're using <videojs-video> on a project, so it would be great to add support for that library as well in the coming updates.

Just a bit of a feedback regarding the accessibility of the component:

• by using keyboard I have no problem selecting the component, navigating through the options and changing them
• by using assistive technologies, such as VoiceOver on Mac, I'm unable to interact with the component and change options, I can just view the currently selected option. Also, the component itself has no meaningful label when announced to the user.

I know that a11y probably wasn't the main concern when developing the first iteration of the component, but this is something to think about for the next version.

Great work on adding this highly requested feature, I'm very pleased with the way it works! 🥳

[luwes]

I added the API's to <videojs-video> https://github.com/luwes/videojs-video-element.
Have a look at a Media Chrome example at the bottom of this page https://videojs-video-element.vercel.app/

[dylanjha]

This is available now in Media Chrome, we've also implemented it in Mux Player as of 12.0