.net - Enable Quality Selector Control in Angular Using Video.js - Stack Overflow

I am using Video.js in an Angular 19.1.3 application, with version 8.21.0 of Video.js. I have successfully set up an HLS stream using a master index.m3u8 file, and the player automatically switches to lower quality segments when the network is slow, and to higher quality when the network is good. This part works as expected.

However, I would like to add a manual quality selection option to allow users to choose the video quality themselves. Despite trying several plugins (such as videojs-hls-quality-selector and videojs-contrib-quality-levels), I haven't been able to get it working.

Can anyone guide me on how to implement this feature in Video.js, ensuring that the quality selector is available for manual selection?

Below is my Components code -

import {AfterViewInit, Component} from '@angular/core';
import videojs from 'video.js';
import '@videojs/http-streaming';
import 'video.js/dist/video-js.css';

@Component({
  selector: 'app-home',
  imports: [],
  templateUrl: './homeponent.html',
  styleUrl: './homeponent.css'
})
export class HomeComponent implements AfterViewInit {
  
  ngAfterViewInit(): void {
    const player = videojs('my-video', {
      autoplay: false,
      controls: true,
      preload: 'auto',
      fluid: true,
      aspectRatio: '16:9',
    })
  
  }
}

Below is my HTML code -

<video id="my-video" class="video-js vjs-default-skin" controls>
    <source src="https://localhost:7063/videos/no1lvswh.zdw.mkv/index.m3u8" type="application/x-mpegURL">
  </video>