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 |