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

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

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

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

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

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

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

Мое приложение (Android и iOS) будет работать с офлайн-видео. Во-первых, я загрузил видео на устройство, используя собственный плагин File, и этот шаг хорош, я могу записать и восстановить файл, и все это будет успешно. Но когда мне нужно загрузить и воспроизвести видео на видеоплеере HTML5 или с помощью videogular2 (http://videogular.github.io/videogular2), видео не загружается ... videogular2 возвращает ошибку '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>

@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>

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

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

LuizFKC 18.10.2018 источник

Ответы (1)

arrow_upward
0
arrow_downward

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

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

nikola.maksimovic 09.01.2019