Add Offline, Online Video Player in Ionic 5 Angular Application using Cordova Plugin

In this Ionic 5 tutorial, we’ll add a Video Player inside the Ionic Angular application for playing multimedia files by using the Cordova and Ionic Native plugins.

The Cordova plugin for Video playing allows playing videos available in the assets folder inside the application package. We can easily add functionality to immediately play a video in fullscreen mode. There are configuration options available provided by this plugin related to Scaling the player and adjusting the Volum.

Let’s start the implementation

Create New Ionic Application

Make sure you have the latest version on Ionic CLI installed. You can install or update by executing below npm command in the terminal

$ ionic start ionic-video-payer blank --type=angular

Move inside the application directory

$ cd ionic-video-payer

Run application in the browser

$ ionic serve --lab

Install Video Player Cordova and Native Plugin

After creating the app, install the Cordova and Native plugin by running below commands

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

Import Plugin App Module

Now, we need to import the VideoPlayer class in the App Module to use its methods. Open the app.module.ts file and make the following changes

// app.module.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,
    VideoPlayer,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now we can use VideoPlayer class in any component inside the application

Using Video Player in Ionic Application

Next, open the home.page.ts file and import the VideoPlayer class and VideoOptions interface.

// home.page.ts
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 {

  options: VideoOptions

  constructor(
    private videoPlayer: VideoPlayer
  ) {
    this.options = {
      scalingMode: 0,
      volume: 0.5
    };
  }

  playLocalVideo() {
    // Playing a video.
    this.videoPlayer.play('file:///android_asset/www/movie.mp4').then(() => {
      console.log('video completed');
    }).catch(err => {
      alert(err);
    });
  }
  playRemoteVideo() {
    // Playing a video.
    this.videoPlayer.play('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4').then(() => {
      console.log('video completed');
    }).catch(err => {
      alert(err);
    });
  }

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

}

These three methods to Play Offline Video, Play Online Video, and Close the Video player.

Update the home.page.html file with three buttons to call these methods

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

<ion-content [fullscreen]="true">
  <h4>Play Offline Video</h4>
  <ion-button expand="full" fill="outline" (click)="playLocalVideo()">Offline Video</ion-button>


  <h4>Play Online Video</h4>
  <ion-button expand="full" fill="outline" (click)="playRemoteVideo()">Online Video</ion-button>


  <h4>Close Player</h4>
  <ion-button expand="full" fill="outline" (click)="closeVideo()">Stop Video</ion-button>
</ion-content>

Run Application in Real Device

To check the Ionic Video Player, you need to run the application in a real device. For that, you need to add the Platform for which you are going to build the application.

Add Platform in Application

Run the following command in the terminal to install the required platform

# Add Android
$ ionic cordova platform add android

# Add iOS
$ ionic cordova platform add ios

# Add Windows
$ ionic cordova platform add windows

Build Runnable File

After adding the platform, you can run the following commands to create an executable file like APK file for Android. Or you can simply run the app in the USB connected mobile with USB Debugging enabled discussed in the next step.

# Build Android
$ ionic cordova build android

# Build iOS
$ ionic cordova build ios

# Build Windows
$ ionic cordova build windows

Live Run Application in USB connected Device

If you just want to run the application in the real device and debug it on the Chrome browser, just execute the following command after connecting your mobile to your computer

# Live Run on Android
$ ionic cordova run android -l

# Live Run on iOS
$ ionic cordova run ios -l

# Live Run on Windows
$ ionic cordova run windows -l

Conclusion

That’s it in this tutorial we discussed how to add Video Player to play offline and online videos using Cordova and Native plugin in an Ionic application. We also discussed how to add platform and test application in a real device to check native features.

If you enjoyed the content. Do share with other geeks. Thanks for reading!

Category: Ionic Framework