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

A Cordova plugin that lets you play a video in fullscreen mode right away.

With the Video Playing Cordova plugin, you can play videos that are in the assets folder inside the application package. We can add the ability to play a video in fullscreen mode right away without much trouble. This plugin gives you options for scaling the player and changing the volume.

Let’s start implementing the code in our Ionic/Anular application

Create "Ionic/Angular" Application

You have to make sure that you have nodejs and ionicframework along with that cordova installed. This will allow you to create Ionic/Angular application and run it in your local machine. You can read our guide on how to create Ionic/Angular application from scratch.

Once you succeed with creating your Ionic/Angular application, next thing you have to do is to install videoplay from ionic-cordova. This will help us to cordova player in our ionic/angular application.

Import Player in our App Module

Now, to use the function or methods of the VideoPlayer class, we need to import it into the App Module. Open the file app.module.ts and make the changes below.

// app.module.ts located in your src/app folder

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

@NgModule({
  declarations: [...],
  entryComponents: [...],
  imports: [...],
  providers: [
    ...,
    VideoPlayer,
    { ... }
  ],
  bootstrap: [...]
})
export class AppModule { } // Export

With that, we are done with the plugin configurations. The next we have to take is to use the video player plugin in our ionic/angular application.

Add a video player in an Ionic/Angular app

Next, Go to home page folder and open the home.page.ts file in your editor. Next add the VideoPlayer import statement at the top of the file along with other import statements like below. Also VideoOptions interface needs to be imported too.

// home.page.ts file location in your src/app folder
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 {

  videoOpt: VideoOptions;

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

  onPlayLocalVideo() {
    // Implementing video player
    this.videoPlayer.play('file:///android_asset/www/video.mp4').then(() => {
      console.log('Done');
    }).catch(error => {
      alert('error: ' + error);
    });
  }
  onPlayRemoteVideo() {
    // Playing a video.
    this.videoPlayer.play('https://ionictemplates.blogspot.com/sample/BigBuckBunny.mp4').then(() => {
      console.log('Done');
    }).catch(err => {
      alert('error: ' + error);
    });
  }

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

}

There are three ways to Play Offline Video, Play Online Video, and Close the Video player.

Add three buttons to the home.page.html file that will call these methods.

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

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


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


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

Well done, that's it. With this, we are done!!!

Test your Ionic/Angular application:

Use the following command in order to deploytIonic/Angular application to your real or emulated mobile device. Full guide can be found below the commands. 

ionic cordova platform add android
ionic cordova run android --aot

If you use above two commands, these will add android platform in your ionic/angular application and will build the app directly to your mobile device. Of course you can use for ios too. You just need to replace "android" with "ios" in the above two commands.

Use the below command in cmd to deploy your android apk.

$ ionic cordova build android --aot --prod

Conclusion

So with this, Our "Offline, Online Video Player in Application" in Ionic/Angular application is over now. See you in next articles. Subscribe us on YouTube for more.

Also Check

Ionic 4|5 Cordova InAppBrowser

Ionic 5|4 Cordova Admob Plugin With Example

Ionic 4|5 Cordova GeoLocation Plugin With Example 

Ionic 5|4 Cordova Barcode Scanner Plugin With Example

Ionic 4|5 Cordova Camera Plugin With Example

Ionic 5|4 Http Calls With Demo API

Ionic 4|5 Upload Image and display

Ionic 5|4 Manage Phone Contacts, Call& display