2

I have an issue (it seems to be hard, I've searched a lot and not found any working solution) with Ionic 3.

Summary of issue

  • Trying to access local video file: 'Not allowed to load local resource: file:///data/user/0/br.com.myapp/files/916354762.mp4'

Steps I need to do

  • Load .mp4 files from web (using XHR blob) and write then on local data directory. (works well)
  • Play the video in app with HTML5 or the other player. (not works)

Detailed description

My app (android & ios) will work with offline video. First, I've downloaded the videos to the device, using a File native plugin and this step is nice, I can write and recover the file, all with success. But when I need to load and play the video on HTML5 video player, or with videogular2(http://videogular.github.io/videogular2), the video isn't loading... The videogular2 returns an error 'Not allowed to load local resource: file:///data/user/0/br.com.myapp/files/916354762.mp4', and the HTML5 player isn't returning any error.

What i've tried and didn't work:

  • Use HTML5 video player
  • Use videogular2
  • Read the video file as base64 string (works well, i can get base64 correctly), but it's large file (>20MB) and the app dies.
  • Set allow-origin file://*/ on config.xml file.

HTML5 video player code:

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 code:

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';

Please, anyone can help me?

Dominik Kunicki
  • 1,037
  • 1
  • 12
  • 35
LuizFKC
  • 46
  • 4

1 Answers1

0

I had the same problem and I resolved it by using this native plugin:

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

This is the example of my short, working-well function:

    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
  • 707
  • 8
  • 12