Angular 12 Video Player Example – Ngx-videogular with Customized Controls

In this Angular tutorial, we’re going to learn how to embed a video player to play videos in Angular 10/9 application with support for the customized playlist and video paying controls using ngx-videogular package.

HTML 5’s Video player provides a lot of options to create a custom player supported for many modern browsers. We can easily use Video tag properties to create a video player as per needs.

For Angular version < 9 the Videogular2 package is used, but for latest Angular 9+ version a new package ngx-videogular needs to be used.

The ngx-videogular packages make video embedding very quick by providing easy to use and awsome layout for a fully-controlled payers by using HTML 5 video player under the hood.

Using this the ngx-videogular we can add many required features very easily like:

• Playlist control.
• Audio player support.
• Multiple players on the same screen.
• Speed control options.
• Live media streaming in the player.

How to Add Video Player with Custome Controls in Angular application?

Let’s start implementation in the Angular application.

 

[lwptoc]

 

Create a New Angular Application

Run following ng command to create a new Angular project

$ ng new angular-video-player-app
# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? SCSS

Enter the project directory

$ cd angular-video-player-app

Run the application

$ ng serve --open

 

Install ngx-videogular Packages

Run the following command to install the ngx-videogular package

$ npm install ngx-videogular --save

 

Import Icons & Styles

Update the styles array in angular.json file

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

 

Update App Module

To use Videogular2 components, we’ll import the required modules. There are around four modules, but you can import as per the application requirement.

Open the app.module.ts file and update it as shown below:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { VgCoreModule, } from '@videogular/ngx-videogular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    VgCoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Simple Video Player

To create a simple video player, add <vg-player> component with HTML 5 <video> tag having [ngMedia]="media" directive.

Inside the <video> tag define <source /> of video files.

<div class="player-wrapper">

    <h3>Simple Video Player</h3>
    <vg-player>
      <video #media [vgMedia]="media" id="singleVideo" preload="auto" controls>
        <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">
      </video>
    </vg-player>

  </div>

This will create a simple Video player

 

Video Player with Custom Control and Icons

The Videogular video player support for custom player controls like Speed control, Status, Play/Pause buttons, Video buffer and playing bar, Mute, and Volum buttons by adding various components.

# Import Modules

To use these components, we need to import a few more Modules including VgControlsModule, VgOverlayPlayModule and VgBufferingModule in the app.module.ts file.

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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,

    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

# Update Component Template

In the App component template, add the following components to render Video player custom controls

<div class="player-wrapper">

    <h3>Video Player with Controls</h3>

    <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 #media [vgMedia]="media" id="singleVideo" preload="auto">
        <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="assets/subs/pale-blue-dot.vtt" srclang="en" default>
        <track kind="subtitles" label="Español" src="assets/subs/pale-blue-dot-es.vtt" srclang="es">

      </video>
    </vg-player>

  </div>

This will render a video player with custom icons and layout for the player.

Video Player with Smart Control and Playlist

Update template to add event listeners and playlist under the player.

<div class="player-wrapper">

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

    <ul>
      <li class="playlist-item" *ngFor="let item of playlist; let $index = index"
        (click)="onClickPlaylistItem(item, $index)" [class.selected]="item === currentItem">
        {{ item.title }}
      </li>
    </ul>

  </div>

Update class component with Playlist object and Player methods

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name = "Angular";
  playlist = [
    {
      title: 'Pale Blue Dot',
      src: 'http://static.videogular.com/assets/videos/videogular.mp4',
      type: 'video/mp4'
    },
    {
      title: 'Big Buck Bunny',
      src: 'http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov',
      type: 'video/mp4'
    },
    {
      title: 'Elephants Dream',
      src: 'http://static.videogular.com/assets/videos/elephants-dream.mp4',
      type: 'video/mp4'
    }
  ];

  currentIndex = 0;
  currentItem = this.playlist[this.currentIndex];
  api;

  constructor() {
  }

  onPlayerReady(api) {
    this.api = api;

    this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(this.playVideo.bind(this));
    this.api.getDefaultMedia().subscriptions.ended.subscribe(this.nextVideo.bind(this));
  }

  nextVideo() {
    this.currentIndex++;

    if (this.currentIndex === this.playlist.length) {
      this.currentIndex = 0;
    }

    this.currentItem = this.playlist[this.currentIndex];
  }

  playVideo() {
    this.api.play();
  }

  onClickPlaylistItem(item, index: number) {
    this.currentIndex = index;
    this.currentItem = item;
  }

}

Add this SCSS style for the playlist with selected class added to the current video.

.player-wrapper {
    max-width: 500px;
    margin: auto;

    video {
        width: 100%;
    }
}
ul {
    padding: 0px;

    li.playlist-item {
        padding: 10px;
        list-style: none;
        background: #e6e6e6;
        margin-bottom: 2px;
        cursor: pointer;
    }

    li.playlist-item.selected {
        background-color: #ccc;
    }
}

The player with playlist will look like this:

 

Conclusion

That’s all for the Video player in Angular 10/9 application using ngx-videogular package. There are many options and components to modify the behavior of Video players.

You can check more examples in the demo project available here.