How to setup Video.js with AngularJS?

Video.js is a modern web video player which is used for creating video players for different video playback formats. It supports all the modern video formats like Youtube, Vimeo, Flash, etc along with all the standard video playback formats like mp4, webm, flv, etc.

Video.js can be integrated with a wide range of popular frameworks like React, Angular, etc. In this article, we'll specifically learn how to set up video.js with AngularJS. We'll create a video.js component using AngularJS and then use it in our project.

How to set up Video.js with AngularJS?

For using video.js with AngularJS, we need to create an angular component for video.js which is going to return an <video>element template with the class as “video-js” and some other video attributes.

After creating the component, we'll use this component in other parts of our project using the component selector.

Now, let's start with creating the AngularJS component for video.js.

First, we'll import video.js along with some prerequisites for the AngularJS component, and then we'll add the details for the component that we want to create.

Example

Consider the below piece of code for the same.

import {
   Component,
   ElementRef,
   Input,
   OnDestroy,
   OnInit,
   ViewChild,
   ViewEncapsulation
} from '@angular/core';
// Importing video.js
import videojs from 'video.js';

@Component({
   selector: 'vjs-player',
template: `
   <video #target class="video-js" controls muted playsinline preload="none"></video>
`,
   styleUrls: [
      './vjs-player.component.css'
   ],
encapsulation: ViewEncapsulation.None,
})

In the above code snippet, first we've imported some pre-requisite for the angular component, and then we've imported video.js.

After Importing video.js, the details of the component have been defined. The selector of this component is named 'vjs-player'. In the template property, we're returning the video element with the class as "video-js" and some standard video properties like controls, preload, etc. In the styleUrls property, the CSS for the component has been defined. Make sure to update the path to your CSS file. And at the bottom, we've set the view encapsulation of this component to none which means all the styles applied to this component are globally applied.

Now since we've imported the required functions and defined our component, let's move ahead with actually implementing the component

Example

Consider the following code, implementing the methods and functions of our video.js component.

// creating the videojs player component
export class VjsPlayerComponent implements OnInit, OnDestroy {
   @ViewChild('target', {static: true}) target: ElementRef;
   
   // Setting the video js options
   // which we need to use
   @Input() options: {
      fluid: boolean,
      aspectRatio: string,
      autoplay: boolean,
      sources: {
         src: string,
         type: string,
      }[],
   };
   player: videojs.Player;
   constructor(
      private elementRef: ElementRef,
   ) {}
   
   // Initializing a video player on component initialization 
   ngOnInit() {
      this.player = videojs(this.target.nativeElement, this.options,
   function onPlayerReady() {
      console.log('video Player on Ready', this);
   });
}
// Destroying the player on component destruction
   ngOnDestroy() {
      if (this.player) {
         this.player.dispose();
      }
   }
}

In the above code, first we've created a class 'VjsPlayerComponent' which implements the ngOnInit and ngOnDestroy methods. Inside the class, we've set the target as our element reference.

Just below that, we've set the input parameters for our video player options which take exactly four parameters i.e., fluid, controls, autoplay, and sources as video options. If you need more video options, then they must be defined here or else they will not work.

After defining the video options, we've implemented the constructor, ngOnInti and ngOnDestroy methods. ngOnInit methods initialized our video player the component is initialized and logs the string “video Player on Ready” in the console. Similarly, the ngOnDestroy method disposes of the video player when the component is destroyed.

Since we've understood the various aspects of the video.js component, the final code will look something like this.

import {
   Component,
   ElementRef,
   Input,
   OnDestroy,
   OnInit,
   ViewChild,
   ViewEncapsulation
} from '@angular/core';
// Importing video.js
import videojs from 'video.js';

@Component({
   selector: 'vjs-player',
   template: `
      <video #target class="video-js" controls muted playsinline preload="none"></video>
`,
   styleUrls: [
      './vjs-player.component.css'
   ],
encapsulation: ViewEncapsulation.None,
})

// creating the videojs player component
export class VjsPlayerComponent implements OnInit, OnDestroy {
   @ViewChild('target', {static: true}) target: ElementRef;
   
   // Setting the video js options
   // which we need to use
   @Input() options: {
      fluid: boolean,
      aspectRatio: string,
      autoplay: boolean,
      sources: {
         src: string,
         type: string,
      }[],
   };
   player: videojs.Player;
   constructor(
      private elementRef: ElementRef,
   ) {}
   
   // Initializing a video player on component initialization
   ngOnInit() {
      this.player = videojs(this.target.nativeElement, this.options,
      function onPlayerReady() {
         console.log('video Player on Ready', this);
      });
   }
   
   // Destroying the player on component destruction
   ngOnDestroy() {
      if (this.player) {
         this.player.dispose();
      }
   }
}

With this our angular.js component for creating a video player has been created. Now, all we need to do is import this component and use it to create video players in our project.

Consider the below code to use the video.js component that we created −

<vjs-player
   [options]="{
      autoplay: true,
      controls: true,
      sources: [
         { src: 'https://www.tutorialspoint.com/videos//video.mp4', type: 'video/mp4' }
      ]}"
>
</vjs-player>

In the above code, we're create a video player using the component selector that we added in the component details. Then we've passed some video options for the player like autoplay, control, and sources. Inside the sources array, we've added the path and mime type of a video file. We can also include multiple video files in the sources array.

We can use only autoplay, controls, fluid, and sources as video options. To make use of other video options we need to define them as input params in the component implementation.

Now, when we execute the above code in our project, a video player will be created which will play our video file and will have video controls also present.

Note − To make the above code work, please change the path to the video file and the CSS file in the component with your files respectively.

Conclusion

In this tutorial, we understood how to set up video.js with angular.js with the help of an example. First, we create a component and implemented its function to create a video player on component initialization and destroy it when the component is destroyed. Later we made use of the video.js component to create a video player.