In this Angular tutorial, we’re going to learn how to embed a video player to play videos in Angular 10/9 application with support for the customized playlist and video paying controls using ngx-videogular
package.
HTML 5’s Video player provides a lot of options to create a custom player supported for many modern browsers. We can easily use Video tag properties to create a video player as per needs.
For Angular version < 9 the Videogular2 package is used, but for latest Angular 9+ version a new package ngx-videogular
needs to be used.
The ngx-videogular
packages make video embedding very quick by providing easy to use and awsome layout for a fully-controlled payers by using HTML 5 video player under the hood.
Using this the ngx-videogular
we can add many required features very easily like:
- Playlist control.
- Audio player support.
- Multiple players on the same screen.
- Speed control options.
- Live media streaming in the player.
How to Add Video Player with Custome Controls in Angular application?
Let’s start implementation in the Angular application.
Create a New Angular Application
Run following ng command to create a new Angular project
$ ng new angular-video-player-app
# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? SCSS
Enter the project directory
$ cd angular-video-player-app
Run the application
$ ng serve --open
Install ngx-videogular
Packages
Run the following command to install the ngx-videogular
package
$ npm install ngx-videogular --save
Import Icons & Styles
Update the styles array in angular.json file
...
"build": {
...
"styles": [
"./node_modules/@videogular/ngx-videogular/fonts/videogular.css",
"src/styles.scss"
],
"scripts": []
},
...
},
...
Update App Module
To use Videogular2 components, we’ll import the required modules. There are around four modules, but you can import as per the application requirement.
Open the app.module.ts file and update it as shown below:
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { VgCoreModule, } from '@videogular/ngx-videogular/core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
VgCoreModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Simple Video Player
To create a simple video player, add <vg-player>
component with HTML 5 <video>
tag having [ngMedia]="media"
directive.
Inside the <video>
tag define <source /> of video files.
<div class="player-wrapper">
<h3>Simple Video Player</h3>
<vg-player>
<video #media [vgMedia]="media" id="singleVideo" preload="auto" controls>
<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">
</video>
</vg-player>
</div>
This will create a simple Video player
Video Player with Custom Control and Icons
The Videogular video player support for custom player controls like Speed control, Status, Play/Pause buttons, Video buffer and playing bar, Mute, and Volum buttons by adding various components.
# Import Modules
To use these components, we need to import a few more Modules including VgControlsModule, VgOverlayPlayModule
and VgBufferingModule
in the app.module.ts file.
// app.module.ts
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 { }
# Update Component Template
In the App component template, add the following components to render Video player custom controls
<div class="player-wrapper">
<h3>Video Player with Controls</h3>
<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 #media [vgMedia]="media" id="singleVideo" preload="auto">
<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="assets/subs/pale-blue-dot.vtt" srclang="en" default>
<track kind="subtitles" label="Español" src="assets/subs/pale-blue-dot-es.vtt" srclang="es">
</video>
</vg-player>
</div>
This will render a video player with custom icons and layout for the player.