javascript - HLS video quality selector in React.js

Question

I am trying to play HLS video (.m3u8) in React.js. The code is running fine. Here is the code snippet:

render() {         
    return(
        <div>
            <ReactHlsPlayer
                src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
                autoPlay={false}
                controls={true}
                width="100%"
                height="auto"
            />
    </div>
    ) 
}

However, I am not getting the quality controller. I have a strict requirement where I need to put the quality selector.

I have followed this reference as well: https://www.npmjs.com/package/videojs-hls-quality-selector but cannot implement on React.js.

How can I implement the quality selector on React.js?

标签： javascriptreactjsreact-nativenpmhtml5-video