Angular 16 Video Player with NGX Videogular Example

Last Updated on March 4, 2024 by Digamber in Angular

This tutorial walks you through on how to integrate video player to run videos in Angular 16 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-videogular package which solves video player embedding in Angular easy.

This package is by far the best package for video embedding in Angular 16, 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 application using below command:

ng new angular-video-player-example

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

Add the code in app.module.ts file.

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

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.html 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]="$any(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>

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: any;

    constructor() { }

    ngOnInit(): void { }

    videoPlayerInit(data: any) {
      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: any, 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]="$any(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;
}

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

ng serve --open

The Bottom Line

NGX Videogular is a powerful open-source video player library for Angular based applications. It offers some handful components and services that makes developers life easy. It offers features for implementing videos in Angular projects.

Videogular is built on top of the HTML5 video element and provides additional features and functionality.

Some key features of NGX Videogular include:

Video playback control: NGX Videogular provides a customizable video player interface with controls such as play, pause, volume control, fullscreen, and playback speed control.

Video quality control: It supports adaptive streaming and allows switching between different video qualities based on the available bandwidth.

Plugins and extensions: NGX Videogular offers a plugin system that allows developers to extend its functionality. It has a wide range of plugins available, including subtitles, cue points, analytics, and social sharing.

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.