Video Player in Angular using ngx-videogular

In this article, we learn how to integrate a video player in an angular application. For integration, we used “ngx-videogular” npm package in our application.
ngx-videogular Videogular is a wrapper over the HTML5 video tag, so we can implement other custom events easily. Using of these plugin we get following benifits

  • Control video speed
  • It support Audio player
  • Create Video play list
  • Live Media streaming on player

Let’s create a new project for video Player in angular for that you need to run the following command to create a project.


ng new angular-video-player

“angular-video-player” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd angular-video-player”. To Run angular applications, it required to run “ng serve”.
After that, we need to install the ngx-videogular npm package in our application. run below command to install.


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

After install package we need to add CSS our application below line need to add “angular.json” file.


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

After we need to import VgCoreModule, VgControlsModule, VgOverlayPlayModule and VgBufferingModule in our app.module.ts file. Display in below code


....
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({
......
imports: [
   .......
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule
  ],
.......
})
......

Let’s create a component for the display video player. run below command to genrate component.


ng g c simpleplayer

simpleplayer.component.html


    <div class="video-player-wrapper">
  
    <h2>Angular Video Player with Controls </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">
       
        <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>

For video player list we need to create second component videoplaylist.


ng g c videoplaylist




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

@Component({
  selector: 'app-vdo-player',
  templateUrl: './vdo-player.component.html',
  styleUrls: ['./vdo-player.component.scss']
})
export class VdoPlayerComponent implements OnInit {

  videoItems = [
    {
      name: 'First Video',
      src: 'http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov',
      type: 'video/mp4'
    },
    {
      name: 'Second Video',
      src: 'http://static.videogular.com/assets/videos/videogular.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;
  }

}



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


After adding it display the below output in application.

Spread the love
  •  
  •  
  •  
  •  
  • 18
  • 1
  •  
  •