如何播放从Ionic 4的选择器插件中选择的视频？

Question

在我的Ionic 4应用中，我需要从图库中选择一个视频，然后使用HTML5的视频标签在画布上播放。我能够正确选择文件，但是我没有确切地需要将什么作为HTML5的视频标签的源。

来自home.page.ts的摘录：

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

来自home.page.html的摘录：

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

Answer 1

FileChoose不返回所选文件的绝对路径，而是返回内容URI，因此File Path插件可为Android内容URI解析本机文件系统路径。

HTML代码

      <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文件

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;
    });
  }
}

将插件声明为提供程序app.module.ts

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

希望这会有所帮助