如何播放从 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，因此文件路径插件解析 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 
  ], 

希望这会有所帮助