ReactJs - unable to get all resolutions from master m3u8 using videojs

Question

I'm currently using ReactJS & Video Js for playing VOD m3u8 files. Video player is unable to get all resolutions from the master.m3u8 manifest. Any help would be highly appreciated. Here is my code -

    import videojs from 'video.js';
    import '../../stylesheet/videojs/videojs.css';

    export default class VideoPlayerHype extends React.Component {
     componentDidMount = () => {
            this.playerFunction()
        }
    playerFunction = () => {
            require('silvermine-videojs-quality-selector')(videojs);
            var videoPlayTime = require('videojs-playtime');
            videojs.plugin('videoPlayTime', videoPlayTime);
            player = videojs('my_video_1', {
                controls: true,
                controlBar: { volumePanel: { inline: false } },
                responsive: true,
                // aspectRatio: '16:9',
                fluid: true,
                autoplay: true,
                playbackRates: false,
                techCanOverridePoster: true,
                textTrackSettings: false,
                seekButtons: require('videojs-seek-buttons'),
                plugins: {
                    controls: true,
                    seekButtons: {
                        forward: 30,
                        back: 30
                    },
                    videoPlayTime: null

                },
            })
            var tracks = player.textTracks();

            player.controlBar.addChild('QualitySelector');
            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                // Find the English captions track and mark it as "showing".
                if (track.kind === 'captions' && track.language === 'en') {
                    track.mode = 'showing';
                }
            }
            player.on('ended', function () {
                // this.props.nextVideo.click()
                $('#play-next').click()
            });
            // hide the video and this current page confirm..
            $(".hide-page-content").click(function () {
                $(".video-js-section").hide("slow");
                // $("").show("slow");
            })
            player.playTime();
            // player.currentTime(localStorage.getItem('lastplayed') ? localStorage.getItem('lastplayed'):this.state.playTime) 

            // var threshold = 4;
            var thresholdReached = false;
            // player = this;
            player.on('timeupdate', function () {
                if (player.currentTime() >= !thresholdReached) {
                    thresholdReached = true;
                    if (!player.paused()) {
                        current_playtime = player.currentTime()
                    }
                }
            });
        }


        render = () => {
    return (
 <div>
<div className="col-md-7 p-0" >
                    {video_url ?
                        <video poster={poster ? poster : ""} id="my_video_1" width="300" height="264" className="w-100 video-js vjs-fluid vjs-default-skin vjs-big-play-centered hover-card vjs-16-9">
                            <source src={`https://content.jwplatform.com/manifests/yp34SRmf.m3u8`} type="application/x-mpegURL" label="Auto"></source>
                        </video>
                        :
                        ""
                    }
                </div>
</div>
     )
         }
    }

There are currenly 6 resolutions in the .m3u8 file , but I am unable to get the selectors in the player.

Answer 1

I used hls-js which gave me all .m3u8 resolutions & lopped on .

Got the solution from - https://github.com/video-dev/hls.js/issues/1441