Description

The HTML5 video player for Angular.

NPM

Install ngx-videogular using npm

ngx-videogular

npm install ngx-videogular --save

Dependencies

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

Includes

Include videogular.css in angular.json

../node_modules/ngx-videogular/fonts/videogular.css

Player Module

Add PlayerComponent into your PlayerModule class. PlayerModule would look like this


import {NgModule} from '@angular/core';
import { CommonModule } from "@angular/common";

import { VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule } from 'ngx-videogular';

import { PlayerRoutingModule } from "./player-routing.module";
import { PlayerComponent } from "./player.component";

@NgModule({
  imports: [
  CommonModule,
  PlayerRoutingModule,
  VgCoreModule,
  VgControlsModule,
  VgOverlayPlayModule,
  VgBufferingModule
],
declarations: [
  PlayerComponent
]
export class PlayerModule { }
              

Player Markup

Player.component.html would look like this


<vg-player<
  <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls<
      <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4"<
  </video<
</vg-player<
                      

Player Component

Player.component.ts would look like this


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

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

    constructor() { }

    ngOnInit() {
    }

  }