How to play a video chosen from the chooser plugin in Ionic 4?

Issue

In my Ionic 4 app I need to choose a video from the gallery and play it on the canvas using the video tag of HTML5. I am able to pick the file correctly, But I am missing out on what exactly needs to be supplied as the source to the video tag of HTML5.

Snippet from home.page.ts:

this.chooser.getFile('video/*').then((value:ChooserResult)=>{
    this.fileObject = value;
})

Snippet from home.page.html:

<video controls>
   <source src={{fileObject.dataURI}} type="video/mp4">
   Your browser does not support the video tag.
</video>

Solution

FileChoose is not returning the absolute path of the selected file, it is returning content URI so File Path plugins resolve the native filesystem path for Android content URIs.

HTML code

      <ion-button (click)="onClick()" expand="block" fill="clear" shape="round">
    Click me
  </ion-button>
  <video controls *ngIf="show">
    <source [src]='sanitizer.bypassSecurityTrustResourceUrl(fileObject)' type="video/mp4">
    Your browser does not support the video tag.
  </video>

TS file

import { Component } from '@angular/core';
import { FileChooser, FileChooserOptions } from '@ionic-native/file-chooser/ngx';
import { DomSanitizer } from '@angular/platform-browser';
import { FilePath } from '@ionic-native/file-path/ngx';
const win: any = window;

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  type: FileChooserOptions;
  fileObject: any;
  show = false;
  constructor(
    private fileChooser: FileChooser,
    public sanitizer: DomSanitizer,
    private filePath: FilePath) {

  }
  onClick() {

    this.fileChooser.open().then((value) => {
      console.log(value);
      this.filePath.resolveNativePath(value)
        .then(filePath => {
          console.log(filePath);
          this.show = true;
          this.fileObject = win.Ionic.WebView.convertFileSrc(filePath);
        })
        .catch(err => console.log(err));
      // this.fileObject = value;
    });
  }
}

Declare plugins into providers app.module.ts

 providers: [
    StatusBar,
    SplashScreen,
    FileChooser,  // new
    FilePath,    // new 
  ], 

Hope this will help

Answered By - Neha Shah