Video player are widely used to play multimedia files into the web and mobile applications, youtube is one of the best video streaming sites where you can play video and watch videos of your choice.
In this quick tutorial, we share with you how to easily implement a video player in the Ionic Angular application with the help of the Ionic native and Cordova video player plugin from scratch.
Cordova is a mobile application development framework that offers a native container for HTML and JavaScript applications; ideally, it gives access to device native features.
In this ionic video player example, we will add the Cordova video player plugin into the ionic app. It allows you to play a video in fullscreen mode located in the app’s assets folder.
It supports only the android platform but comes with few handy customization options for your video player.
Install Ionic App
In the terminal window, type the command and install ionic cli.
npm install -g @ionic/cli
You can now install Ionic angular blank app:
ionic start demo-app blank --type=angular
Get inside the project:
cd demo-app
Remove Type Errors
You have to remove strict type errors make sure to set “strictTemplates”: false
in angularCompilerOptions in tsconfig.json file.
Install Video Player Plugin in Ionic
Ideally, you have to type the given below commands on the command prompt to install the video player plugin from the ionic native and Cordova libraries.
ionic cordova plugin add https://github.com/moust/cordova-plugin-videoplayer.git
npm install @ionic-native/video-player
Add Video Player Module in AppModule Class
In order to add a video player, you must register the VideoPlayer module into the AppModule class, so do update the app.module.ts file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// module
import { VideoPlayer } from '@ionic-native/video-player/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
VideoPlayer,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent],
})
export class AppModule {}
Integrate Video Player in Ionic Angular
Let us integrate offline and online video player in ionic angular app. So, we use the default home component to integrate offline and online video player, go to the home page HTML template, add three buttons inside the ion-content directive. Attach three custom functions to play online, offline videos and close the video.
Update home.page.html file:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Ionic Offline/Online Video Player Demo
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-button expand="block" (click)="onlineVid()">Play Online Video</ion-button>
<ion-button expand="block" (click)="offlineVid()">Play Local Video</ion-button>
<ion-button expand="block" (click)="close()">Close</ion-button>
</ion-content>
Import VideoPlayer, VideoOptions also inject VideoPlayer into the constructor, further use VideoOptions module to set the volume of the player. Finally, create onlineVid(), offlineVid() and close() methods to handle video player.
Update home.page.ts file:
import { Component } from '@angular/core';
import { VideoPlayer, VideoOptions } from '@ionic-native/video-player/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
optons: VideoOptions
constructor(
private player: VideoPlayer
) {
this.optons = {
volume: 0.8
};
}
onlineVid() {
this.player.play('http://static.videogular.com/assets/videos/elephants-dream.mp4').then(() => {
}).catch((err) => {
alert(err);
});
}
offlineVid() {
this.player.play('file:///android_asset/www/movie.mp4').then(() => {
}).catch((err) => {
alert(err);
});
}
close() {
this.player.close();
}
}
Test Application in Devices
To test the video player in the device, add the platform, create, build and run the application with the help of following commands.
# Android
ionic cordova platform add android
Further, create a runnable build:
# Android
ionic cordova build android
Lastly, run the application:
# Android
ionic cordova run android -l
Conclusion
Ionic video player example is completed; now you know how to implement a video player in the ionic platform using Cordova and ionic native plugin.
You have also seen how to integrate online and offline video player In ionic and start the app by adding and creating a runnable build.