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.