Angular 10 Video Player using ngx-videogular with Customized Controls Example

Last updated on by Digamber

This tutorial walks you through on how to integrate video player to run videos in Angular 10 application using the ngx-videogular library.

When it comes to customization of the video player, then HTML 5 has not turned any stone unturned.

HTML 5 Video player offers you the freedom to build a custom video player, and the good thing is it is widely supported by the latest browsers too. 

You just need to define a Video tag to create a video player this way you can easily embed a video player. 

In this tutorial, we will learn to work with the ngx-videoglar package which solves video player embedding in Angular easy. 

This package is by far the best package for video embedding in Angular 10|9, and you can make HTML 5 video player with full options to control the video.

With the ngx-videogular plugin you can make future-ready Angular video application and get multiple benefits:

  • Control video speed
  • Audio player support
  • Control video playlist
  • Live media streaming on the player
  • Run multiple video players at the corresponding screen

Install Angular Application

First and the foremost thing is to create a brand new Angular 10 application using below command:

ng new angular-video-player-example

Answer few angular CLI questions:

# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? CSS

Move to project root:

cd angular-video-player-example

Install ngx-videogular Plugin in Angular

It is effortless to install ngx-videogular in angular, and you can use the below command.

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

Now, we have to register the videogular CSS in angular.json file. We need to register it to use the custom styling and icons of videogular package.

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

Videogular relies heavily on HTML5 standards allowing you to create your own video player just by adding some tags and attributes to your HTML code.

Import Videogular Modules in App Module

We are going to import VgCoreModule, VgControlsModule, VgOverlayPlayModule and VgBufferingModule in Angular’s main app module class; this way, we can use Videgular 2 plugin in Angular 10.

Add the code in app.module.ts file.

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 {VgOverlayPlayModule} from '@videogular/ngx-videogular/overlay-play';
import {VgBufferingModule} from '@videogular/ngx-videogular/buffering';

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

export class AppModule { }

Create Video Player with Custom Controls

Now, we are going to create a video player with custom controls in angular project.

All you have to do, just paste the following code in app.component.ts file.

<div class="video-player-wrapper">

  <h2>Angular Video Player with Controls 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.ogg" type="video/ogg">
      <source src="http://static.videogular.com/assets/videos/videogular.webm" type="video/webm">

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

</div>

Next, you have to run the following angular CLI command to start the app to check the custom angular video player.

ng serve --open

Create Video Player with Custom Controls

Create Video Playlist with Advance Controls

We will create a new angular component to show the example of a video playlist with advance controls.

ng g c vdo-player

Add the code in vdo-player.component.ts file:

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

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

export class VdoPlayerComponent implements OnInit {

  videoItems = [
    {
      name: 'Video one',
      src: 'http://static.videogular.com/assets/videos/videogular.mp4',
      type: 'video/mp4'
    },
    {
      name: 'Video two',
      src: 'http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov',
      type: 'video/mp4'
    },
    {
      name: 'Video three',
      src: 'http://static.videogular.com/assets/videos/elephants-dream.mp4',
      type: 'video/mp4'
    }
  ];

  activeIndex = 0;
  currentVideo = this.videoItems[this.activeIndex];
  data;

  constructor() { }

  ngOnInit(): void { }

  videoPlayerInit(data) {
    this.data = data;

    this.data.getDefaultMedia().subscriptions.loadedMetadata.subscribe(this.initVdo.bind(this));
    this.data.getDefaultMedia().subscriptions.ended.subscribe(this.nextVideo.bind(this));
  }

  nextVideo() {
    this.activeIndex++;

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

    this.currentVideo = this.videoItems[this.activeIndex];
  }

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

  startPlaylistVdo(item, index: number) {
    this.activeIndex = index;
    this.currentVideo = item;
  }

}

Place the following code in vdo-player.component.html file:

<div class="video-player-wrapper">

    <vg-player (onPlayerReady)="videoPlayerInit($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]="currentVideo.src" id="singleVideo" preload="auto" crossorigin>
      </video>
    </vg-player>

    <ul class="player-list">
      <li *ngFor="let vdo of videoItems; let $index = index"
        (click)="startPlaylistVdo(vdo, $index)" [class.selected]="vdo === currentVideo">
        {{ vdo.name }}
      </li>
    </ul>

  </div>

Place the following code in vdo-player.component.css file:

.video-player-wrapper {
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
}

.player-list {
   margin: 0;
   padding: 0;
}

.player-list li {
   list-style: none;
   padding: 15px 35px;
   display: block;
   background: #cccc;
   cursor: pointer;
   text-align: left;
   margin-bottom: 1px;
}

li.selected {
    background: #03A9F4 !important;
}

The Bottom Line

So this was it, we have finally completed the Angular Video Player tutorial. In this tutorial, we discussed the best video player plugin videogular for embedding video player in angular applications with custom controls.

I hope you will like this article and share it with others.