Best way to integrate the VideoJS Plugin in angular
Posted By : Dheeraj Sharma | 31-Jan-2022
Videojs is the most common, easy to integrate and easily customizable plugin. It is very easy to integrate with any web framework like, angular, react, vue and vanilla js. Today I'll show you how easily we can implement the videojs plugin in angular latest framework.
So here are steps to implement the videojs plugin:-
Step 1: Create an angular application with "ng new videojs-demo" and setup the project structure create a component of video-player and get any video for demo.
Step 2: Setup the videojs in your project. Go to official website of videojs and get the CDN and add into your index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VideojsDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
<script src="https://vjs.zencdn.net/7.17.0/video.js"></script>
</body>
</html>
Step 3: Now go to the video-player component and initialize the ngAfterViewInit function into your component and setup the videojs player and in video-player.component.html add a video tag and set template reference variable.
video-player.component.html
<p>Videojs Player</p>
<video #target class="video-js" controls muted playsinline preload="none" style="object-fit:cover" width="774px"
height="400.75px" >
<source [src]="videoLink" type="video/mp4">
</video>
video-player.component.ts
import { Component, ElementRef, Inject, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
declare var videojs: any;
@Component({
selector: 'app-vr-player',
templateUrl: './vr-player.component.html',
styleUrls: ['./vr-player.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class VrPlayerComponent implements OnInit {
@ViewChild('target', {static: true}) target!: ElementRef;
@Input() videoLink!: string;
options = {
autoplay: false,
notSupportedMessage: 'Invalid Video URL', // to change the default message
}
player!: any;
qualityLevels: any;
constructor() { }
ngOnInit(): void {
}
ngAfterViewInit(): void {
this.readyVideojsPlayer()
}
readyVideojsPlayer() {
this.player = videojs(this.target.nativeElement, this.options, function () { });
this.player.src({
src: this.videoLink,
type: 'video/mp4'
})
}
ngOnDestroy() {
if (this.player) {
this.player.dispose();
}
}
}
Step 4: Now call the Video Player Component in App Component and set the decorators according to Video Player component:
app-player.component.html
<div class="video-player">
<app-video-player [videoLink]="videoSrc"></app-video-player>
</div>
app-player.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'videojs-demo';
videoSrc = 'https://mekya.github.io/web_test/paragliding_360.mp4';
constructor( ) {
}
ngOnInit() {
}
}
That's it. Now its demo time. Run your project "ng serve" and see the output. In videojs there are lots of videojs plugin you can implement and its very easy to customize according to your need.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Dheeraj Sharma
With extensive experience in Angular Web Development, Dheeraj is a highly efficient Frontend Developer. He has a remarkable ability to create reusable components and services using Angular. He has a solid background in angular web development, and his expertise has been demonstrated through his involvement in various projects such as VIXO, Pandojo, Script TV, Belair Travel, and Metaverse. In addition to his proficiency, Dheeraj also possesses knowledge of HTML, CSS, JavaScript, TypeScript, Angular Material, Ionic 4, and Firebase.