react-hls-player 流媒体视频

Question

I am using react-hls-player in my project. this is my sample code

 const playerRef = useRef();
    return (
      <ReactHlsPlayer
          playerRef={playerRef}
          src="http://sample.vodobox.com/planete_interdite/planete_interdite_alternate.m3u8"
          autoPlay={false}
          controls={true}
          width="100%"
          height="auto"
         
      />
  );

i want to know is there any way to change hls video quality?

Answer 1

you can use this package , it supports a callback for the HLS Player object as soon as it becomes available in the component. You can then use this HLS object to change the video quality by setting the currentLevel the documentation is available here

Answer 2

react-hls-player uses hls.js under the hood. You can get the HLS player instance by using ref .

You can change the level(video quality) by setting currentLevel in hls.js

See the documentation for more information.

Update:

It seems like react-hls-player does not expose hls instance. You can see from source code that playerRef is a reference to video tag. So you cannot access hls API.

You can do two things:

1. Patch the package and expose hls instance.
2. Write your own React component.