Как воспроизвести видео, выбранное из плагина выбора в Ioni c 4? - PullRequest
Новая
       28

Как воспроизвести видео, выбранное из плагина выбора в Ioni c 4?

0 голосов
/ 15 апреля 2020

В моем приложении Ioni c 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>

1 Ответ

1 голос
/ 16 апреля 2020

FileChoose не возвращает абсолютный путь к выбранному файлу, он возвращает URI содержимого, поэтому плагины File Path разрешают собственный путь файловой системы для Android URI содержимого.

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 файл 

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 
  ],

Надеюсь, это поможет

...