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/
Top comments (3)
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
Thanks for sharing this post.
I have used the same code but not able to see quality icons in the video.
Maybe this could be of help . it contains various ways to get the video quality in video.js github.com/sahilkashyap64/hls