Solution 1 :

have a look at this:
I found 2 ways to do it.
index.html Credits to Hasan Alibegić

Lib Version
video.js    ^5.19.2
hls.min.js  ^0.9.1
vjs-quality-picker.js   ^0.0.2
videojs5-hlsjs-source-handler.min.js    ^0.3.1


Lib Version
video.js    ^6.6.3
videojs-quality-menu.min.js ^1
videojs-hlsjs-plugin    ^stable

there’s a index3.html as well
here’s demo link:

Solution 2 :

There is a plugin available for video.js which does exactly what I think you want.

If you look at the screen here you can see the user can switch between SH and HD for example:

enter image description here

You can see full details here:

Note that it states it is for Video.js version 5 which is an older version now so you may have to check and modify for the current video.js version.

Problem :

Using HLS.js

    (() => {
        var video = document.getElementById('video');
        if(Hls.isSupported()) {
            var hls = new Hls();

            hls.on(Hls.Events.MANIFEST_PARSED,function() {
            // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
            // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
            // This is using the built-in support of the plain video element, without using hls.js.
            // Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
        // white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
        else if (video.canPlayType('application/')) {
            video.src = '';
            video.addEventListener('loadedmetadata',function() {

        video.addEventListener('canplaythrough',  () =>  {
            var promise =;
            if (promise !== undefined) {
                promise.catch(function(error) {
                    console.error('Auto-play was prevented');
                }).then(function() {
          'Auto-play started');

In this Stream i can get the levels or the qualities i have for the Video but the controls dosen’t show up in the video player. how can we get that .

Using Video .js

    (() => {
        let source = document.getElementById('video-source');
        source.src = '';
        source.type = 'application/x-mpegURL';
                        class="video-js vjs-4-3 vjs-big-play-centered"
                        controls = "true"
                    <source id = "video-source" src="" />
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser that
                        <a href="" target="_blank">supports HTML5 video</a>

Same problem occurs for Video Js too . I cannot get to see the controls , what am i missing .

Things i have looked into .
Every-time i add this i get hlsQualitySelector not a function .
And for hls.js i got // which explains it but do i need to have my own UI for this.

I am using Plain vanilla JS and HTML for this project.