Play Video In Angular Using Ignite UI Video Player

Introduction

The Ignite UI Video Player is an HTML 5 Video Player which renders video on a web page with a robust, cross-browser user interface. It supports H264/AVC video, Ogg/Theora video, and WebM video formats. Ignite UI Video control has many feature like volume control, screenshot, related videos can be added, bookmarks of video can be created, we can set banner ads as well as commercial ads, and more. If you rbrowser does not support HTML 5 then the you can set Microsoft Silverlight media control to enable playback.

Creating Demo

Let's create a demo project by just simply rendering the Ignite UI Video Player control in Angular.

For this Demo project we are using Visual Studio code and Angular. In case you need to set Angular first, you can find help here.

Open Visual Studio code and enter the following command.

ng new (Project Name)

This will create a new blank project for our demo. Now change the directory to the newly-created project and install the angular wrapper by using the following command.

npm install igniteui-angular-wrappers

This will install all the required packages and dependency in the project.

Let's import the required module in src/app/app.module.ts file.

import { IgVideoPlayerComponent } from "igniteui-angular-wrappers";

And also put “IgVideoPlayerComponent ” in the declaration. Refer to Figure 1.

Figure 1

Now let's replace the html to our video player html tag in src/app/app.component.html

<ig-video-player widgetId="videoPlayer" [options]="videoPlayer.options"></ig-video-player>

Now open the src/app/app.component.ts file and add the variable which holds the properties of Video Player and initialize that in constructor.

public videoPlayer: any;
constructor() {
this.videoPlayer = {
options: {
width: '100%',
sources: ['https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.h264.mp4',
'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.webmvp8.webm',
'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.theora.ogv']
}
};
}

The last step is to add the CSS files and Java Scripts file to the project which is provided by Infragistics.

Go to the src/index.html and add the following under the head section.

<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"
/>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>

Save all files and open the terminal. To test the project hit the command

ng server --open

This will build the project and open the default browser and show the output of the project. Refer to Figure 2.

Figure 2

Ignite UI Video Player has the following features,

Video Player Controls
Commercial Ads
Bookmarks
Banners
Related Videos

Video Player Controls

To perform Ignite UI Video player actions manually (I e Play, Pause, Add Screen shot etc), go to the app.component.ts file and import “ViewChild” in header from “@angular/core”

Go to the app.componet .Html file and update the video player tag like this:

“<ig-video-player widgetId="videoPlayer" [options]="videoPlayer.options" #vp1></ig-video-player>”

Notice the # tag in the video control which help us to find the control in component.ts file. We set the value to vp1.

Add another button which is used to play/pause the video:

<button (click)="playPause($event.target)" id="btnPlay" class="buttons" type="button">
Play
</button>

Go back to the app.component.ts file and make the function after constructor as follows:

playPause(e) {
if (this.isVpPlaying) {
this.vp1.pause();
this.isVpPlaying = false;
e.textContent = ''Play'';
} else {
this.vp1.play();
this.isVpPlaying = true;
e.textContent = Pause;
}
}

This is a simple function in which we are passing a button to function and changing the text accordingly. We also declare a simple bool called “isVpPlaying” which controls the play/pause action. Save the changes and go back to the browser. Refer to Figure 3:

Figure 3

To add screenshot functionality in the app go to the app.component.Html file and add another button for screenshot.

<button (click)="addScreenShot()" id="btnAddScreenShot" class="buttons" type="button">
Add screenshot
</button>

Add another div which renders the screen shot at runtime:

<div ng-if="screenShotAvail">
<div id="scrrenShotDiv" #screenShotDivEle>
</div>
</div>

We will set the if condition on div which stops rendering if the bool is false (optional).

Now go to the app.component.ts file and add the “ElementRef ” in the header.

import { Component, ViewChild, ElementRef } from '@angular/core'

Add the variable to refer to the div element.

@ViewChild('screenShotDivEle') div: ElementRef;

Make a new function as follows:

addScreenShot() {
const cn = this.div.nativeElement;
const canvas1 = this.vp1.screenshot();
this.screenShotAvail = true;
cn.appendChild(canvas1);
}

Figure 4

Commercial Ads

To add commercial ads in videos go to app.component.ts. In the constructor function where we define all properties of video add the following code:

commercials: {
linkedCommercials: [
{
sources: [
'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.h264.mp4',
'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.webmvp8.webm',
'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.theora.ogv'],
startTime: 20,
title: 'Quince<br/>Presentation<br/>Part 1',
link: 'http://www.infragistics.com/'
},
{
sources: [
'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4',
'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm',
'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv'],
startTime: 100,
title: 'Quince<br/>Presentation<br/>Part 2',
link: 'https://www.infragistics.com/'
}],
adMessage: {
hideDelay: 13000
}
}

This Commercial section needs to be added under the “option” section property. For output refer to Figure 5.

Figure 5

Bookmark

To add bookmarks in the video, go to the app.component.ts and add the following code.

bookmarks: [
{
title: 'River',
description: 'River',
time: 13
},
{
title: 'Big Buck Bunny Appears',
description: 'Big Buck Bunny Appears',
time: 33
}
]

This bookmarks section need to be added under the “option” section property. For output refer to Figure 6.

Figure 6

Banner

To add the the banner on the video go to the app.component.ts and add the following code.

banners: [{
imageUrl: 'https://www.igniteui.com/images/samples/video-player/banner.png',
link: 'https://www.infragistics.com/',
times: [5, 20, 60],
visible: true,
closeBanner: true,
animate: true,
autohide: true,
hidedelay: 10000,
width: 270,
height: 67
}],

This bookmarks section needs to be added under the “option” section property. For output refer to Figure 7.

Figure 7

Related Videos

To add the the Related video’s url in the end of video, go to the app.component.ts and add the following code.

relatedVideos: [
{
imageUrl: 'https://vassallohistory.files.wordpress.com/2013/09/adelphi-rabat.jpg?w=100',
title: 'Quince Presentation Part 1',
css: 'relatedVideosBanner',
sources: ['https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4',
'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm',
'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv'
]
}
]

This related videos section needs to be added under the “option” section property. For output refer to Figure 8.

Figure 8

Summary

In this tutorial, we saw how to implement video player on a website using Ignite UI Video player. To learn more and download, please visit Ignite UI Video Player sample page here.