Play Video Using video.js and videojs-hls-quality-selector

npm install --save video.js npm install --save videojs-hls-quality-selector npm install --save videojs-contrib-quality-levels 

<video id="my-video" class="video-js vjs-default-button vjs-big-play-centered" controls playsinline preload="auto" width="640" height="480" data-setup="{}" > <source src="{{this.url}}" type="application/x-mpegURL"/> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank" >supports HTML5 video</a > </p> </video> 

import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core'; import videojs from 'video.js'; declare var require: any; require('videojs-contrib-quality-levels'); require('videojs-hls-quality-selector'); @Component({ selector: 'app-video-player', templateUrl: './video-player.component.html', styleUrls: ['./video-player.component.css'] }) export class VideoPlayerComponent implements OnInit, AfterViewInit, OnDestroy { public player: videojs.Player; url = 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'; constructor() { } ngOnInit(): void { } ngAfterViewInit() { const options = { 'sources': [{ 'src': this.url, 'type': 'application/x-mpegURL' } ], // 'poster' : this.urlPoster }; this.player = videojs('my-video', options, function onPlayerReady() { console.log('Player ready'); var myPlayer = this, id = myPlayer.id(); myPlayer.hlsQualitySelector(); }); } ngOnDestroy(): void { if (this.player != null) { this.player.dispose(); } } } 

{ "name": "videojs-player", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { ... "video.js": "^7.7.5", "videojs-contrib-quality-levels": "^2.0.9", "videojs-hls-quality-selector": "^1.1.1", ... } }