How to add a video quality selector in the Video.js player?

I have implemented an HTML5 video player using Video.js, but it does not provide video quality or resolution selector, is there any javascript that can help me add a quality selector?

Video.js is an excellent player, there is a huge community built around Node.js with many plugins available, you can find a list of them here.

I believe this is exactly what you want to do just follow the link and let me know if you need further help.

Great! Let me check and try and will come back soon if I need more help or information.


I am also facing the same issue, I am confused about how to use these plugins, and I don’t even see any examples of plugins in React. The way I used the plugins don’t work. Please help.

Can you please share your code here?

Yes sure!
Here it is

<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet">
<script src="../dist/silvermine-videojs-chromecast.min.js<?php echo "?".$version; ?>"></script>

            <div class="col-sm-6">
                <div class="video-player1">
                    <video autoplay id="example-video" class="video-js vjs-theme-fantasy custom-videojs" controls>
                        var options = {
                            html5: {
                                hlsjsConfig: {
                                    // Put your hls.js config here
                            controls: true,
                            techOrder: [ 'chromecast', 'html5' ], // You may have more Tech, such as Flash or HLS
                            plugins: {
                                chromecast: {}

                        // setup beforeinitialize hook
                        videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
                            // here you can interact with hls.js instance and/or video.js playback is initialized

                        var player = videojs('example-video', options, function() {});

                        var overlay_content = '<div class="overlay_title"><div class="wrapper"><img src="images/nologo.jpg" align="middle" class="logoVideo" id="logovideo"> <div style="padding-left:10px"><h2 id="channeltitle" style="font-size: 22px;" ></h2><h4 id="descrtitle" style="font-size: 17px;"></h4></div></div><div id="progressp" class="progress-bar"><div id="progress_channel" class="progress"></div></div>';
                            overlays: [{
                                start: 'useractive',
                                content: overlay_content,
                                end: 'userinactive',
                                align: 'bottom'
                        function play(url) {
                                src: url,
                                type: 'application/x-mpegURL'
                            // here you can interact with hls.js instance and/or video.js playback is initialized

Did you try to add this plugin: GitHub - silvermine/videojs-quality-selector

I think you need to insert these imports on top rather than inside the script.

After that try to add the control for players like this player.controlBar.addChild('QualitySelector');I hope this may resolve your issue.