Integrate Video Player in Ionic 7 with Video Player Plugin

Last Updated on March 4, 2024 by Digamber in Ionic

This is a comprehensive Ionic 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 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

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Start the application:

ionic serve --lab

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

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.

npm i cordova plugin add cordova-plugin-video-player --legacy-peer-deps

npm install @ionic-native/video-player --legacy-peer-deps

Register Video Player in Ionic

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:

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';

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    { 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.