Ionic3 Angular не позволяет получить доступ к локальному видеофайлу с видеоплеера (Android и iOS) - PullRequest
Новая
       23

Ionic3 Angular не позволяет получить доступ к локальному видеофайлу с видеоплеера (Android и iOS)

0 голосов
/ 18 октября 2018

У меня проблема (кажется, это сложно, я много искал и не нашел никакого рабочего решения) с Ionic 3.

Краткое описание проблемы

  • Попыткачтобы получить доступ к локальному видеофайлу: 'Not allowed to load local resource: file:///data/user/0/br.com.myapp/files/916354762.mp4'

Шаги, которые мне нужно сделать

  • Загрузить файлы .mp4 из Интернета (используя BLOB-объект XHR) и затем записать в локальный каталог данных,(хорошо работает)
  • Воспроизвести видео в приложении с помощью HTML5 или другого проигрывателя.(не работает)

Подробное описание

Мое приложение (android & ios) будет работать с автономным видео.Во-первых, я загрузил видео на устройство, используя плагин File native, и этот шаг хорош, я могу записать и восстановить файл, все с успехом.Но когда мне нужно загрузить и воспроизвести видео на видеоплеере HTML5 или с видеогуляром2 (http://videogular.github.io/videogular2), видео не загружается ... Видеогуляр2 возвращает ошибку 'Not allowed to load local resource: file:///data/user/0/br.com.myapp/files/916354762.mp4', а проигрыватель HTML5 - нетВозврат любой ошибки.

То, что я пробовал и не работало:

  • Использовать проигрыватель видео HTML5
  • Использовать видеогуляр2
  • Читатьвидеофайл в формате base64 string (работает хорошо, я могу правильно получить base64), но это большой файл (> 20 МБ), и приложение умирает.
  • Установите allow-origin file://*/ для config.xml файла.

HTML5 код видеоплеера:

html 

<video #video controls autoplay></video>

ts 

@ViewChild('video') videoPlayer: ElementRef;
...
let video = this.videoPlayer.nativeElement;
video.src = 'file:///data/user/0/br.com.myapp/files/916354762.mp4';
or
video.src = '/data/user/0/br.com.myapp/files/916354762.mp4'; // i've tried also without file://, also not works, i also tried with DomSanitizer
video.play();

VIDEOGULAR2 код:

html 

<vg-player (onPlayerReady)="onPlayerReady($event)">
    ...
    <video #media
           [vgMedia]="media"
           [src]="src"
           id="singleVideo"
           preload="auto"
           crossorigin>
    </video>
  </vg-player>

ts 

video.src = 'file:///data/user/0/br.com.myapp/files/916354762.mp4';
or
video.src = '/data/user/0/br.com.myapp/files/916354762.mp4';

Пожалуйста, кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 09 января 2019

У меня была та же проблема, и я решил ее с помощью этого собственного плагина:

https://ionicframework.com/docs/native/file-opener/

Это пример моего короткого, работающего хорошофункция: 

    playFile() {
    this.fileOpener.open("file:///storage/emulated/0/DCIM/Camera/VID_20190103_143837.mp4", "video/mp4")
      .then(() => console.log("File is opened"))
      .catch(e => console.log("Error opening file", e));
  }
...