How to use videogular2 with Ionic 5 ?

In this tutorial, i will show you how to use videogular2 with Ionic 5, for playing videos from local source (assets folder) or external source (from internet).

The source code repository

If you want to embed a video player in your Ionic 5 page working in mobile and desktop, there is no solution other than using an external package. Ionic or Capacitor doesn't provide a ready component/plugin yet !

Videogular2 is an HTML5 video player for Angular2+, which is working on mobile and browser. It is a perfect candidate to use with Ionic 5.

Installing videogular2 to use with Ionic 5

If you try to install the official npm for videogular2, your Ionic 5 compilation source code will failed, raising some import issues. To avoid these issues, we need to use the ngx-videogular package.

But before that let's create our Ionic 5 project with command

ionic start videoplayer blank --capacitor --project-id=videoplayer --package-id=com.ionicanddjangotutorials.videoplayer

Then we can go into our new created ionic 5 directory videoplayer and install a Ionic 5 videogular2 compatible plugin with command

npm i --save @videogular/ngx-videogular

Using videogular2 with Ionic 5

Now we need to import the videogular css and library modules into our Ionic 5 project. Let's start with the css file. We can edit our global.scss file and add the line

@import "~@videogular/ngx-videogular/fonts/videogular.css";

Then we will modify our home.module.ts file to import videogular2 main modules.

import { VgCoreModule } from '@videogular/ngx-videogular/core';
import { VgControlsModule } from '@videogular/ngx-videogular/controls';
import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';

Ok the final file should be

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';

import { VgCoreModule } from '@videogular/ngx-videogular/core';
import { VgControlsModule } from '@videogular/ngx-videogular/controls';
import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

In the home.page.ts file script, we will declare an array of our videos. One will come from our ionic assets directory and the other one would be loaded from internet. To display videos, we will modify the home.page.html file and write

<ion-header>
  <ion-toolbar>
    <ion-title>Demo VideoPlayer    
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <div class="videoplayer">
    <vg-player (onPlayerReady)="onPlayerReady($event)">
      <video class="videoplayer" [vgMedia]="media" #media id="singleVideo" preload="auto" controls crossorigin>
        <source [src]="urlVideo" type="video/mp4">
      </video>
    </vg-player>
  </div>
  <ion-grid class="ion-no-padding">
    <ion-row class="ion-padding">
      <ion-col *ngFor="let item of items" size="4" class="ion-padding">
        <div class="module">
        <ion-item fill="clear" class="ion-no-padding" (click)="playVideo(item)">
          <ion-img src="{{item.imagePreview}}" alt="Image not found"></ion-img>
         
        </ion-item>
        <div  class="ion-no-padding">
          <h4 class="overlay-text">{{item.title}}</h4>
        </div>
      </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

First we create a <div> containing our videogular2 player

 <div class="videoplayer">
    <vg-player (onPlayerReady)="onPlayerReady($event)">
      <video class="videoplayer" [vgMedia]="media" #media id="singleVideo" preload="auto" controls crossorigin>
        <source [src]="urlVideo" type="video/mp4">
      </video>
    </vg-player>
  </div>

The onPlayerReady method will be fired once the player will be ready.

The urlVideo will contains our video url to play. To learn mode about the player and available option, you can consult the documentation.

After that, we display a simple Ionic grid showing available videos with their title and image preview. Each item/video in the grid is clickable and will call the method playVideo(item).

Ok final step, we can modify the home.page.ts file to write our code

import { Component, ViewChild } from '@angular/core';
import { VgApiService, VgMediaDirective } from '@videogular/ngx-videogular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild(VgMediaDirective, { static: true }) media: VgMediaDirective;
  api:VgApiService;
  urlVideo:string=""
  items = [
    {
      "title":"External file",
      "url":"http://static.videogular.com/assets/videos/videogular.mp4",
      "imagePreview":"assets/earth.png"
    },
    {
      "title":"Local video file",
      "url":"assets/videogular.mp4",
      "imagePreview":"assets/earth.png"
    },
  ]
  constructor() {}

  playVideo(item){
   
    // Play video
    this.urlVideo=item.url
    if (this.media){
       this.media.vgMedia.src=this.urlVideo
       this.media.subscriptions.canPlay.subscribe((value)=>{
        //this.api.fsAPI.toggleFullscreen()
        this.media.play()
       })
    }
  }

  onPlayerReady(api:VgApiService){
    this.api = api
    this.urlVideo = this.items[0].url
   // this.api.fsAPI.toggleFullscreen()
  }
}

To grab a reference to the media video we can use a ViewChild instruction

@ViewChild(VgMediaDirective, { static: true }) media: VgMediaDirective;

Then in our method playVideo(item) , we can use that reference to change the video url to play.

 this.media.vgMedia.src=this.urlVideo

We also subscribe to the event that the media is ready to play and if ready we play it. If you try to play the video without waiting for that canPlay event it will not work correctly.

 this.media.subscriptions.canPlay.subscribe((value)=>{
        //this.api.fsAPI.toggleFullscreen()
        this.media.play()
       })

In the method onPlayerReady(api:VgApiService) we get a reference to the VgApi service. We can use this service to toggle the video in fullscreen if required

this.api.fsAPI.toggleFullscreen()

Et voila. We are now able to play local or external video files in a Ionic 5 project, on mobile and on web ! Nice job.

Christophe Surbier