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() {
}
}
Refer following links for usage:
| Type | URL |
|---|---|
| Plugin Github Page | https://github.com/sliceofbytes/ngx-videogular |
| Template Page | https://demos.pixinvent.com/apex-angular-admin-template/demo-1/components/player |
