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

Introduction

How to play hls video in Angular using video.js and show quality-selectors

Create simple angular App and use following commands to install video js components

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

video-player.component.html

<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>

video-player.component.ts

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();
    }
  }

}

package.json

{
  "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",
    ...  
  }
}

Source
https://silentsudo.gitlab.io/post/angular/2020-05-04-videojs-quality-selector-hls-streaming/

Comments

[Sivuyile Magutywa]

import videojs from 'video.js';

declare var require: any;
require('videojs-contrib-quality-levels');
require('videojs-hls-quality-selector');

I get this error
ERROR TypeError: myPlayer.hlsQualitySelector is not a function

[shivshankar2435]

Thanks for sharing this post.
I have used the same code but not able to see quality icons in the video.

[Sahil kashyap]

Maybe this could be of help . it contains various ways to get the video quality in video.js github.com/sahilkashyap64/hls