How to Integrate Video Player in Ionic 5 App with Cordova Video Player Plugin

This is a comprehensive Ionic 5 video player tutorial; in this tutorial, we will learn how to create a video player to run offline and online videos effortlessly using the Cordova video player plugin in Angular Ionic 5 application.

Create Ionic Project

In order to work with an Ionic project, you need to have Ionic CLI installed on your development system.

So, open your command prompt and execute the following command:

npm install -g @ionic/cli

You can check the Ionic CLI version with below command:

ionic --version

All set, now run the following command to install a brand new angular-based Ionic application:

ionic start ionic-video-player-example blank --type=angular

Navigate to the project root:

cd ionic-video-player-example

Start the application:

ionic serve --lab

Install Cordova Video Player Plugin

Some of the imperatives have been considered. Ideally, we have to move to the next and the crucial step.

Now, we are about to install the Cordova video player and ionic native video player plugins.

ionic cordova plugin add https://github.com/moust/cordova-plugin-videoplayer.git
npm install @ionic-native/video-player

Register Video Player in Ionic 5

We must import VideoPlayer service in main AppModule class, also inject the VideoPlayer class in providers array.

Place the following code in app.module.ts file:

// src/app.modules.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { VideoPlayer } from '@ionic-native/video-player/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    VideoPlayer
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

From now on, we are free to use VideoPlayer service throughout the Ionic application.

Adding Video Player in Ionic

In this tutorial, we are going to add a video player in the Ionic application to display videos. We will not create any new Ionic component; instead, we will use the default Home page.

So, place the following code in the 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 {

  videoOptions: VideoOptions

  constructor(
    private videoPlayer: VideoPlayer
  ) {
    this.videoOptions = {
      volume: 0.7
    };
  }

  playOfflineVideo() {
    this.videoPlayer.play('file:///android_asset/www/movie.mp4').then(() => {
      console.log('video finished');
    }).catch(error => {
      console.log(error);
    });
  }

  playOnlineVideo() {
    this.videoPlayer.play('http://static.videogular.com/assets/videos/elephants-dream.mp4').then(() => {
      console.log('video finished');
    }).catch(error => {
      console.log(error);
    });
  }

  closeVideoPlayer() {
    this.videoPlayer.close();
  }

}

Add the code in the home.page.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Video Player Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="container">
    <ion-button expand="block" color="primary" (click)="playOfflineVideo()">View Local Video</ion-button>

    <ion-button expand="block" color="success" (click)="playOnlineVideo()">View Online Video</ion-button>

    <ion-button expand="block" color="danger" (click)="closeVideoPlayer()">Close Video Player</ion-button>
  </div>
</ion-content>

Test Application in Devices

We have created the Angular Ionic video player application, its time to test the application. So, first, add the platform of your choice using the given below commands.

# For Android
ionic cordova platform add android

# For Windows
ionic cordova platform add windows

# For iOS
ionic cordova platform add ios

We have added the platforms, and now we have to create the build. Run either of the command from the command prompt:

# For Android
ionic cordova build android

# For Windows
ionic cordova build windows

# For iOS
ionic cordova build ios

The Bottom Line

Finally, we have finished this tutorial. In this tutorial, we learned through the simple way about how to run offline and online videos using a custom video player that we integrated using the Cordova video player plugin.

I hope you will love this article and you will surely share it with others.