Quality selector option is not visible in angular v12.2

import videojs from "video.js"; import "videojs-seek-buttons"; // import "@silvermine/videojs-quality-selector"; import "videojs-contrib-eme";

declare var require: any; require('@silvermine/videojs-quality-selector')(videojs);

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], encapsulation: ViewEncapsulation.None, }) export class AppComponent implements OnInit, OnDestroy, AfterViewInit { @ViewChild('myYtPlyr') myYtPlyr: ElementRef; ytPlyr: any; options: object = { playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2], responsive: true, plugins: { seekButtons: { forward: 10, back: 10 } } };

encToken: any = '********************';

ngOnInit(): void { }

ngAfterViewInit(): void {
    this.playYtVdo();
}

ngOnDestroy() {
    if (this.ytPlyr) this.ytPlyr.dispose();
}

playYtVdo() {
    setTimeout(() => {
        // this.playerSetting();
        this.ytPlyr = videojs('myYtPlyr', this.options);
        this.ytPlyr.eme();
        this.ytPlyr.src(
            {
                label: '720p',
                selected: true,
                src: 'https://dxip4wcd8mhk4.cloudfront.net/drm/65a25fd4-7a25-46f4-85e6-55bc38264d71/720p/drm/stream.mpd',
                type: 'application/dash+xml',
                //withCredentials: true,
                keySystems: {
                    'com.widevine.alpha': {
                        url: this.encToken,
                    },
                },
            },
            {
                label: '480p',
                selected: false,
                src: 'https://dxip4wcd8mhk4.cloudfront.net/drm/65a25fd4-7a25-46f4-85e6-55bc38264d71/480p/drm/stream.mpd',
                type: 'application/dash+xml',
                //withCredentials: true,
                keySystems: {
                    'com.widevine.alpha': {
                        url: this.encToken,
                    },
                },
            },
        );

        **this.ytPlyr.controlBar.addChild('QualitySelector');**

        this.ytPlyr.on('ready', (event: any) => {
            // this.ytPlyr.play();
        });
    }, 0);
}

}

silvermine / videojs-quality-selector

Quality selector option is not visible in angular v12.2 #102