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

Question

在我的 Ionic 4 应用程序中，我需要从图库中选择一个视频并使用 HTML5 的视频标签在 canvas 上播放它。我能够正确选择文件，但我错过了 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 
  ],

希望这会有所帮助

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

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

angularjs

ionic-framework

cordova-plugins

ionic4