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

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

 1<video
 2id="my-video"
 3class="video-js vjs-default-button vjs-big-play-centered"
 4  controls
 5  playsinline
 6  preload="auto"
 7  width="640"
 8  height="480"
 9  data-setup="{}"
10>
11  <source src="{{this.url}}" type="application/x-mpegURL"/>
12  <p class="vjs-no-js">
13    To view this video please enable JavaScript, and consider upgrading to a
14    web browser that
15    <a href="https://videojs.com/html5-video-support/" target="_blank"
16    >supports HTML5 video</a
17    >
18  </p>
19</video>

 1import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
 2import videojs from 'video.js';
 3
 4declare var require: any;
 5require('videojs-contrib-quality-levels');
 6require('videojs-hls-quality-selector');
 7
 8@Component({
 9  selector: 'app-video-player',
10  templateUrl: './video-player.component.html',
11  styleUrls: ['./video-player.component.css']
12})
13
14export class VideoPlayerComponent implements OnInit, AfterViewInit, OnDestroy {
15  
16  public player: videojs.Player;
17  
18
19  
20  url = 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8';
21
22  constructor() {
23  }
24
25  ngOnInit(): void {
26  }
27
28  ngAfterViewInit() {
29    const options = {
30      'sources': [{
31        'src': this.url,
32        'type': 'application/x-mpegURL'
33      }
34      ],
35      // 'poster' : this.urlPoster
36    };
37    this.player = videojs('my-video', options, function onPlayerReady() {
38      console.log('Player ready');
39      var myPlayer = this, id = myPlayer.id();
40      myPlayer.hlsQualitySelector();
41    });
42
43  }
44
45  ngOnDestroy(): void {
46    if (this.player != null) {
47      this.player.dispose();
48    }
49  }
50
51}

 1{
 2  "name": "videojs-player",
 3  "version": "0.0.0",
 4  "scripts": {
 5    "ng": "ng",
 6    "start": "ng serve",
 7    "build": "ng build",
 8    "test": "ng test",
 9    "lint": "ng lint",
10    "e2e": "ng e2e"
11  },
12  "private": true,
13  "dependencies": {
14    ...    
15    "video.js": "^7.7.5",  
16    "videojs-contrib-quality-levels": "^2.0.9",
17    "videojs-hls-quality-selector": "^1.1.1",
18    ...  
19  }
20}