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.77k stars 71 forks source link

Renditions menu not available with React wrapper components #863

Closed nwang92 closed 7 months ago

nwang92 commented 7 months ago

I have an example of the using hls.js with media-chrome in React and found that the renditions menu does not seem to populate with options other than "Auto".

I created an example here using this stream which should have multiple different size renditions: https://codesandbox.io/p/sandbox/youthful-mendel-tjqshd

It works when using a basic HTML example like shown in https://github.com/muxinc/media-chrome/discussions/845 but it doesn't seem to be working as expected with the React code. From inspecting elements, I see mediarenditionunavailable="unsupported" on the <media-controller> element.

Is there something I need to call to populate the menu or should it be automatic?

luwes commented 7 months ago

which video engine are you using?

if hls.js you have to either use https://github.com/muxinc/hls-video-element

or manually implement the renditions API https://github.com/muxinc/media-tracks https://github.com/muxinc/hls-video-element/blob/master/hls-video-element.js#L87-L200

nwang92 commented 7 months ago

Got it, thanks

ringuralte commented 5 months ago

@nwang92 what did you end up doing to implement the renditions menu? do you use hls-video-element with react?

nwang92 commented 5 months ago

@nwang92 what did you end up doing to implement the renditions menu? do you use hls-video-element with react?

I had some issues with using the hls-video-element element in React as a drop-in solution so I didn't get very far there. I was thinking of reimplementing the renditions API myself but I haven't looked into it yet.

luwes commented 5 months ago

since recent there is a React wrapper for each of the custom media elements if that helps. https://media-elements-nextjs.vercel.app/hls-video https://github.com/muxinc/media-elements/blob/main/examples/nextjs/app/hls-video/page.tsx#L2

ringuralte commented 5 months ago

@nwang92 what did you end up doing to implement the renditions menu? do you use hls-video-element with react?

I had some issues with using the hls-video-element element in React as a drop-in solution so I didn't get very far there. I was thinking of reimplementing the renditions API myself but I haven't looked into it yet.

So I was able to get this working using @mux/mux-player-react but you have to use the playbackId from your src, but this way the renditions menu works

https://codesandbox.io/p/sandbox/youthful-mendel-forked-dwj5qt?file=%2Fsrc%2FPlayer.tsx

I didn't end up using the useEffect so I removed it, I tried passing the ref to MuxPlayer like you did when you use <video>, it plays the video but that didn't load the renditions menu either but it works when you use the playbackId