How to support quality levels in video.js and videojs-contrib-dash. videojs-contrib-quality-levels is not working

Question

I am using Video.js and videojs-contrib-dash plugin to play a video from an MPD file with DRM. The MPD file has two resolutions: 480p and 720p. ABR (Adaptive Bitrate) is working well according to the network bandwidth. However, I want to manually set the resolution. I tried using videojs-contrib-quality-levels, but it's not working.

It's just giving an empty array.

const qualityLevelsPlugin = player.qualityLevels();

Versions:

"video.js": "^7.20.3",
"videojs-contrib-dash": "^5.1.1",
"videojs-contrib-quality-levels": "^2.2.1",

Also tried adding quality levels manually to qualityLevels using addQualityLevel method.

Using this for trigger:

qualityLevelsPlugin.selectedIndex_ = 1;
qualityLevelsPlugin.trigger({ type: 'change', selectedIndex: 1 });

But not working!!

Answer 1

These are the things you should check during the integration of video.js with quality controllers. Here i have attach the code for Vue.js as well.

Resolution display in video js

//imports:
import "videojs-contrib-quality-levels"; // Import quality levels plugin
import "@mycujoo/videojs-hls-quality-selector"; // quality or resoultion menu

//Mounted time code:
    this.player = videojs(this.$refs.videoPlayer, this.options, () => {
      // Initialize the quality levels plugin
      // this.player.qualityLevels();
      this.player.log("onPlayerReady", this);
      console.log(this.player);
    });
    this.player.hlsQualitySelector({
      displayCurrentQuality: true,
    });
  },

// Option variable
{
        autoplay: true,
        controls: true,
        responsive: true,
        preload: true,
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        html5: {
          hls: {
            // withCredentials: true,
            overrideNative: true,
          },
        },
        sources: [
          {
            // withCredentials: true,
            src: `test.m3u8`,
            type: "application/x-mpegURL",
          },
        ],
        plugins: {
          qualityLevels: {},
        },
      }