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

Tech QnA
1

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?

2

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.
Videojs-contrib-quality-levels.

3

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

Thanks

4

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.

5

Can you please share your code here?

6

Yes sure!
Here it is

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="https://cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-overlay/1.1.4/videojs-overlay.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" 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>
                    </video>
                    <script>
                        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>';
                        player.overlay({
                            overlays: [{
                                start: 'useractive',
                                content: overlay_content,
                                end: 'userinactive',
                                align: 'bottom'
                            }]
                        });
                        function play(url) {
                            player.pause();
                            player.src({
                                src: url,
                                type: 'application/x-mpegURL'
                            });
                            player.load();
                            player.play();
                            // here you can interact with hls.js instance and/or video.js playback is initialized
                        }
                    </script>
7

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.

Cheers!