Create Angular 11 Video Player with NGX Videogular Package

Angular 11 Video Player example, in this tutorial, you will learn creating a video player in the angular application using the ngx-videogular library.

Ngx-Videogular is a relentless HTML5 video player specially built for Angular 2.0 +. On top of that, Videogular plugin provides a wrapper over the HTML5 video tag and lets you implement a video player in Angular without putting intense efforts. Moreover, you can create custom controls in the video player and manage the angular videos effortlessly.

Here are the features that you get with videogular:

  • Simple Player
  • Single Player
  • Audio Player
  • Bound Player
  • Multiple Players
  • Cue Points Player
  • Google IMA Player
  • Master Player
  • DASH & HLS Player
  • Custom Media Element
  • Video Playlist

Angular 11 Video Player Example

  • Create an Angular project
  • Install ngx-videogular
  • Setting up Videogular package in angular
  • Build a video player in angular
  • Build advance custom video controls in angular
  • Create a video media playlist
  • Run angular development server

Create Angular App

The first step starts with installing a new angular application, use the below command:

ng new angular-video-player-demo

Get inside the project folder:

cd angular-video-player-demo

Install Videogular and Core JS Packages

In the second step, you have to use the below command to install the ngx-videogular and core-js packages:

npm install @videogular/ngx-videogular

npm install @types/core-js --save-dev

Next, you need to add the videogular CSS, so go to angular.json and add the CSS path:

styles": [
   "./node_modules/@videogular/ngx-videogular/fonts/videogular.css",
   "src/styles.scss"
]

Now, you need to start the angular development server:

ng serve --open

In this step, you have to import Videogular modules, so open app.module.ts file and add the below code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import {VgCoreModule} from '@videogular/ngx-videogular/core';
import {VgControlsModule} from '@videogular/ngx-videogular/controls';
import {VgBufferingModule} from '@videogular/ngx-videogular/buffering';
import {VgOverlayPlayModule} from '@videogular/ngx-videogular/overlay-play';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Build Simple Angular Video Player

In this step, you will create a simple angular video player using the videogular directives. The vg-player directive evokes the wrapper around a video player, whereas the vg-controls help you create the angular video player’s custom controls.

Open and update the app.component.ts:

  <h2>Simple Angular Video Player Example</h2>

  <vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <vg-scrub-bar>
      <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
      <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>

    <vg-controls>
      <vg-play-pause></vg-play-pause>
      <vg-playback-button></vg-playback-button>

      <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

      <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>

      <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

      <vg-track-selector></vg-track-selector>
      <vg-mute></vg-mute>
      <vg-volume></vg-volume>

      <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
      <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
      <source src="http://static.videogular.com/assets/videos/videogular.webm" type="video/webm">
      <source src="http://static.videogular.com/assets/videos/videogular.ogg" type="video/ogg">

      <track kind="subtitles" label="English" src="http://static.videogular.com/assets/subs/pale-blue-dot.vtt"
        srclang="en" default>
      <track kind="subtitles" label="EspaƱol" src="http://static.videogular.com/assets/subs/pale-blue-dot-es.vtt"
        srclang="es">
    </video>
  </vg-player>

Create Video Media Playlist with Controls

Subsequently, you will learn to build a video playlist in angular that also will have custom controls.

Update code in app.component.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  videoIPlaylist = [
    {
      name: 'Video 1',
      src: 'http://static.videogular.com/assets/videos/videogular.mp4',
      type: 'video/mp4'
    },
    {
      name: 'Video 2',
      src: 'http://static.videogular.com/assets/videos/elephants-dream.mp4',
      type: 'video/mp4'
    },
    {
      name: 'Video 3',
      src: 'http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov',
      type: 'video/mp4'
    },    
  ];

  activeIndex = 0;
  currentVid = this.videoIPlaylist[this.activeIndex];
  data;

  constructor() { }

  ngOnInit(): void { }

  invokePlaylist(data) {
    this.data = data;

    this.data.getDefaultMedia().subscriptions.loadedMetadata.subscribe(this.evokeVideo.bind(this));
    this.data.getDefaultMedia().subscriptions.ended.subscribe(this.nextVdo.bind(this));
  }

  nextVdo() {
    this.activeIndex++;

    if (this.activeIndex === this.videoIPlaylist.length) {
      this.activeIndex = 0;
    }

    this.currentVid = this.videoIPlaylist[this.activeIndex];
  }

  evokeVideo() {
    this.data.play();
  }

  startPlayer(item, index: number) {
    this.activeIndex = index;
    this.currentVid = item;
  }
}

Update code in app.component.html file:

<vg-player (onPlayerReady)="invokePlaylist($event)">
  <vg-overlay-play></vg-overlay-play>
  <vg-buffering></vg-buffering>

  <vg-scrub-bar>
    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
    <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
  </vg-scrub-bar>

  <vg-controls>
    <vg-play-pause></vg-play-pause>
    <vg-playback-button></vg-playback-button>

    <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

    <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

    <vg-mute></vg-mute>
    <vg-volume></vg-volume>

    <vg-fullscreen></vg-fullscreen>
  </vg-controls>

  <video #media [vgMedia]="media" [src]="currentVid.src" preload="auto" crossorigin>
  </video>
</vg-player>

<ul class="video-list">
  <li *ngFor="let video of videoIPlaylist; let i = index" (click)="startPlayer(video, i)"
    [class.selected]="video === currentVid">
    {{ video.name }}
  </li>
</ul>

Conclusion

From this angular video tutorial, we have understood the basics of using videogular package in angular applicaiton. We can easily create a simple video player to create custom controls and create a media playlist with advance controls. Moreover, the videogular API is a robust API which can be explored further to add some advance video player features; you can go ahead and try more.