4

I am working on a custom video player that streams videos from different sources (YouTube, Vimeo, etc.) using react-player, and it already has functioning controls that I set up like play/pause, volume/mute, progress bar, and full screen.

I am trying to add a gear button that has a popover which displays different resolutions to set the video to, but I cannot seem to find any video quality selection implementation for react-player anywhere online.

Is this kind of functionality possible with react-player at all, or should I choose a different react video player like video.js?

otran
  • 41
  • 1
  • 3

3 Answers3

1

it seems there is a way using getInternalPlayer('hls') and onLoad event. see this answer in github issue:

https://github.com/CookPete/react-player/issues/523#issuecomment-442652418

moeinghasemi
  • 81
  • 1
  • 10
0

Here is a component sample using an HLS video file (m3u8)

const player = useRef();

const onChangeBitrate = (event) => {
    const internalPlayer = player.current?.getInternalPlayer('hls');
    if (internalPlayer) {
        // currentLevel expect to receive an index of the levels array
        internalPlayer.currentLevel = event.target.value;
    }
}

return <div>
  <ReactPlayer ref={player} url={'https://....m3u8'} />

  Quality:
  <select onChange={onChangeBitrate}>
    {player.current?.getInternalPlayer('hls')?.levels.map(
      (level, id) => <option key={id} value={id}>
        {level.bitrate}
      </option>
    )}
  </select>
</div>;
pyrou
  • 351
  • 1
  • 8
-1

No, Not in the documentation also of react-player but if you want to change the resolution you can use the Shaka Player it will help to change the resolution of the video.

Use the NPM library for Player : React Shaka Player

Can also check the demo : Shaka Player Demo

Shaka Player also supports almost all functionality like in React player. We can able to use MP4, 3gp, and encrypted videos like DASH and m3u8.

Sonu P.
  • 85
  • 1
  • 5